Vue官方-深入了解组件

一、组件注册

1.组件名

在注册一个组件的时候，我们始终需要给它一个名字。

    Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。
我们可以在官方-风格指南中查阅到关于组件名的其它建议。

组件名称：自定义，可以使用短横线或者驼峰命名方式的命名方式，
但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。

组件名大小写:
定义组件名的方式有两种：
① 使用 kebab-case （是的没错就是烤肉串(～￣▽￣)～）
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。

    Vue.component('my-component-name', { /* ... */ })

② 使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

    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

在模板里面搞个 ..... ，插槽在模板的某处，那这个东东就在html的某处显示。

    
        
            全国著名小吃