vue组件的内分发

定义

1. 为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板，这个过程称为内容分发。Vue.js实现了一个内容分发API，使用特殊的slot元素作为原始内容的插槽。
2. 可以理解为slot就是个插槽，要分发的内容将要插到这个在子组件里预留好的插槽内（替换slot标签）。
3. 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示，以及怎样显示是由父组件来决定，最核心问题就是显不显示怎样显示。
4. 插槽模板是slot，它是一个空壳子，因为它的显示隐藏以及最后用什么样的HTML模板显示由父组件控制的，但是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板就来就显示什么位置。

编译作用域

父组件模板的内容在父组件作用域内编译；

子组件模板的内容在子组件作用域内编译；

   {{ message }}

message应该绑定到父组件的数据；

下面这个错误是将父组件的一个指令绑定到子组件的属性方法：

如果要绑定作用域内的指令到一个组件的根节点，你应当在自己的模板上做：

Vue.component('child-component',{
   // 这才是正确的作用域内
   template:'
child
'
   data:function(){
     return{
        childProperty:true
     }
})

单个slot

子组件至少要有一个 ‘slot’插口，不然父组件的内容将会被丢弃（被slot标签的内容替换）。如果子组件模板只有一个没有属性的slot时，父组件整个内容片段将插入到‘slot’所在DOM位置。并替换掉slot标签本身。

最初在‘slot’标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入内容是才显示备用内容。

   
我是父组件的标题
   
      
初始内容
      
初始内容
    

Vue.component('my-component',{
  template:'
    

        
我是子组件标题
        只有在没有要分发的内容时才显示
    
',
})

new Vue({

  el:'#app'

})

子组件slot的位置就是要分发的‘初始内容的2个p标签’

    
我是父组件的标题
    
    

具名slot

slot元素可以用一个特殊的属性name来配置如何分发内容。多个slot可以有不同名字，具名slot将匹配内容片段中对应slot特性元素

也可以有一个匿名slot，默认是slot，作为找不到匹配的内容片段的备用插槽。如果没有默认的slot，这些找不到匹配的内容片段将会被抛弃。

   
       
这是标题
       
第一个段落
       
第二个段落
       
联系信息
   

Vue.component('my-component',{
  template:'
  

      

          
      
      

          
      
      

          
      
   
  
',
})

new Vue({
  el:'#app'
})

作用域插槽

1. 作用域是一种特殊类型的插槽，使用一个可重用模板替换已渲染元素。在子组件中，只需将数据传递到插槽，就像你将props传递给组件一样
2. 也称作是带数据的插槽

Vue.commponent('my-component',{
   template:'
       

           
        
    ',
    props:['text']  
})

new Vue({
   el:'#app'
})

在父级中，具有特殊属性的scope的