组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素.

注册

全局注册

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

//初始化根实例

配置组件

像这些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

...

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

<script type="text/x-template">

JavaScript 内联模板字符串

.vue 组件

data必须是函数

组件通讯

组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

父子通讯

在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

prop

要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

Vue.component('child', {  // 声明 props  props: ['message'],  // 就像 data 一样，prop 可以用在模板内  // 同样也可以在 vm 实例中像“this.message”这样使用  template: '{
   { message }}'})

camelCased vs kebab-case

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {  // camelCase in JavaScript  props: ['myMessage'],  template: '{
   { myMessage }}'})

动态prop

要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。

子父传递数据 (emit)

每个 Vue 实例都实现了事件接口 (Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

非父子组件通信

有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()  // 触发组件 A 中的事件bus.$emit('id-selected', 1)  // 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) {  // ...})


       
        
     
    
## 使用slot分发内容  注意两点：  1.
    
      组件不知道它会收到什么内容。  这是由使用 
     
       的父组件决定的。  2.
      
        组件很可能有它自己的模板。

<style>

.box{        margin: 10px;        width: 150px;        border: 1px solid #ccc;    }    .box-header, .box-footer{        height: 30px;        background: sandybrown;    }    .box-body{        min-height: 100px;    }

<body>


        
             
      Slot内容分发
              为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 
        
          元素作为原始内容的插槽。
        
        分发完成