组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件的创建和注册

我们可以使用 Vue.component(tagName, options)注册一个全局组件。

    
    
    
    
  
     
      我的组件
     
    
复制代码

我们还可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件，即局部组件。

    
    
    
    
  
     
      我的组件
     
    
使用prop组件实例的作用域是孤立的。父组件的数据需要通过 prop 才能下发到子组件中。
    
    复制代码

如果想要传递一个变量到子组件中去，即传给子组件的值会跟随父组件中该变量的值的变化而变化，我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。

    
    复制代码

我们还可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

    复制代码

自定义事件进行组件通讯

现在我们父组件可以使用 prop 传递数据给子组件。但子组件怎么跟父组件进行通信呢？这里我们可以通过自定义事件来实现。

具体点说就是使用 $on(eventName) 监听事件，使用 $emit(eventName, optionalPayload) 触发事件。

    复制代码

使用插槽分发内容

为了让组件可以自由组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。我们可以使用特殊的 <slot> 元素作为原始内容的插槽，从而实现内容分发。

如果子组件模板包含一个 <slot> 插口，那么父组件的内容将会被渲染到插槽中。

    
      
     
    
      
子组件的标题
    
      
             只有在没有要分发的内容时才会显示。    
        
     
    
    
    
    
    
  
     
父组件的标题
  
     
    
      
子组件的标题
    
      
这是将会分发到子组件的一些初始内容
  
     
    
复制代码

当需要有多个插槽时，我们可以在<slot> 元素上用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽配置不同的名字，这时具名插槽将匹配内容片段中有对应 slot 特性 name 的元素。

    
    
    
    
    
    
  
     
    
      
头部标题
  
     
  
     
    
      
主体内容的一个段落。
  
     
  
     
    
复制代码

总结

本节主要知识点是vue.js中组件的创建和注册，父组件使用prop向子组件传递数据并进行数据验证，使用自定义事件进行组件间的通讯，使用插槽来使组件可以自由组合。vue.js组件是vue框架中最强大的功能，学完后相信你对web组件化也会有一定的了解了。