Vue官方-深入了解组件
一、组件注册
1.组件名
在注册一个组件的时候，我们始终需要给它一个名字。
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
我们可以在官方-风格指南中查阅到关于组件名的其它建议。
组件名称：自定义，可以使用短横线或者驼峰命名方式的命名方式，
但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
组件名大小写:
定义组件名的方式有两种：
① 使用 kebab-case （是的没错就是烤肉串(～￣▽￣)～）
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
Vue.component('my-component-name', { /* ... */ })
② 使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说
Vue.component('MyComponentName', { /* ... */ })
2.全局注册
这些组件是全局注册的。也就是说它们在注册之后，可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({
el: '#app'
})
在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
3.局部注册
局部注册的组件，只能在当前Vue实例中使用，并且在其子组件中不可用。
在components选项中定义局部组件。
每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
① template选项：定义组件的模板。模板中必须包含一个根标签。
② props选项：定义组件标签上的属性。
驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。
注意：props是只读的，不能修改（解决办法：在data中对props接收到的数据进行中转）。
- props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。不够严谨。
例如：props:["count"]。 - props的值可以是一个对象，里面定义每个标签属性名称，以及对应的类型。
例如：props:{ count:Number }。 - props的值可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，
在这个对象里面定义该属性的完整信息。
type定义类型，required非空，default默认值。
例如：props: {count: { type: Number, required: true, default: 1 } }
③ data：定义组件的数据。
注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。
new Vue({
el: '#app',
components: {
// 自定义组件名
'component-name': {
template:`
hello
`,
props:{ },
data() {
return { }
}
}
}
})
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
传送看官方┗|｀O′|┛ 嗷~~
二、自定义组件练习
- {{item.label}}---{{item.count}}
触发一个自定义事件，事件名称是synccount，将val的最新值作为事件对象传出去
$emit()用于触发自定义事件。注意：自定义事件名称不能采用大写。
this.$emit('synccount',val)
三、组件中的插槽 slot
在模板里面搞个
全国著名小吃