Vue的组件
什么是组件
组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件。
组件的好处
- 组件可以重复使用多次，组件关系更加清晰
- 大幅度提高应用开发效率、测试性、复用性等
- 合理的划分组件，有助于提高应用性能
- 让web前端代码实现“高内聚”和“低耦合”
- 最小化了重绘
- 避免了不必要的dom操作
组件的注意事项
- 组件参数的data值必须是一个函数，不是对象，这个函数要求返回一个对象
- 组件中必须有一个唯一的根元素
- 模板中内容较多时候建议使用模板字符串
- 组件命名如果用驼峰命名法，那么插入实例的时候要换成短横线，因为html标签对大小写不敏感;例如：divBox插入实例就得写成<div-box></div-box>
怎么注册组件（https://v2.cn.vuejs.org/v2/guide/components-registration.html）
组件名
Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象
Vue.component('my-component-name', { /* ... */ })
组件名大小写
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册（任何vue实例都可以用）
<div id="app">
<p>组件初始</p>
<first></first>
</div>
<script>
Vue.component('first', {
template: `
<div class='com'>
<h3>first组件的标题</h3>
<p>组件的内容</p>
</div>
`
})
// 创建根实例
const app = new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
局部注册（只能在当前注册它的vue实例中使用）
<div id="app">
<p>组件初始</p>
<first></first>
<second></second>
</div>
<script>
// 1.全局组件
Vue.component('first', {
template: `
<div class='com'>
<h3>first组件的标题</h3>
<p>组件的内容</p>
</div>
`
})
const app = new Vue({
el: "#app",
data: {},
methods: {},
// 注册局部组件
components: {
'second': {
template: `
<div>局部组件</div>
`
}
}
})
</script>
