组件(4)：使用slot进行内容分发

摘要：绑定到子组件属性绑定到父组件属性在子组件模板内将指令绑定到子组件属性列表第一项，由于父组件找不到属性，将不会显示。哪都通快递龙虎山天师府曜星社内容分发中的被插入中，并且因为中的指令而进行迭代，迭代之后通过获取上的属性数据。

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

父子组件的编译相互独立，编译时只能使用各自作用域中的属性和方法，例如，你不可以在父组件模板内，将一个指令绑定到子组件的属性或方法上。如果这么做控制台会报一个属性未定义的错误。

如果想要绑定一个指令以便控制子组件的行为，那么你可以在子组件的模板内，将一个指令绑定到子组件的属性或方法上；或者在父组件的模板内，将指令绑定到父组件的属性或方法上。

new Vue({
    el: "#app-2",
    data: {
        makeChildShow: true
    },
    components: {
        "component-2-1": {
            template: "I am an sub component.",
            data: function () {
                return {
                    childIsShow: true
                }
            }
        },
        "component-2-2": {
            template: "I am an sub component.",
            data: function () {
                return {
                    childIsShow: true
                }
            }
        }
    }
})

  

    
绑定到子组件属性:
    
绑定到父组件属性:
    
在子组件模板内将指令绑定到子组件属性:
  

列表第一项，由于父组件找不到属性childIsShow，将不会显示。

将父组件的内容插入子组件模板的方式，我们称为内容分发。
默认情况下，在子组件中插入的父组件内容是不显示的。

new Vue({
    el: "#app-1",
    data: { message: "I come from parent." },
    components: {
        "component-1": {
            template: "
I am an sub component.
",
        }
    }
})

  
    {{ message }}
  

内容分发失败，message不会显示。

如果想使用内容分发，将父组件内容插入到子组件的模板中，必须在子组件的模板内标记一个备选内容，父组件将找到这个备选内容标记，并将自己的内容替换备选内容。
如果父组件没有待分发的内容，备选内容成为最终渲染的结果。

new Vue({
    el: "#app-3",
    components: {
        "component-3": {
            template: "
            

                
子组件内容
                
子组件内容
                
插口备选内容
                
子组件内容
                
子组件内容
            
"
        }
    }
})

  
父组件标题
  
    
父组件插入内容
  

单插口模式做内容分发，只能一股脑把套入子模板的内容插入到有标记的地方。
而具名插口在内容和slot上都做上标记，对应的内容只能分发到对应的slot上。
标记内容用slot="tag"； 标记slot用

new Vue({
    el: "#app-4",
    components: {
        "component-4": {
            template: "
            

                

                    
                
                

                    
                
                
                

            
"
        }
    }
})

  
    
我来组成头部
    
没被标记的slot都我插
    
我来组成腿部
  

以上定义了两个个不具名的插口，虽然这里显示正确，但是控制台报错，说定义重复的默认插口会有不预期的错误

根据具名插口，再来看个组件作用域的例子

new Vue({
    el: "#app-7",
    methods: {  
        parentMethod: function () {  
            console.log("It is the parent"s method");  
        }  
    },  
    components:{
        "component-7":{
            methods:{
                childMethod: function(){
                    console.log("It is the child"s method")
                }
            },
            template:"
                
                    
                    子组件模板定义部分①|
                    
                    子组件模板定义部分②
                "
        }
    }
})

  
      内容分发部分①|  
      内容分发部分②|  
  

内容分发部分属于父组件作用域，因此点击按钮的内容分发部分，会调用父组件方法，输出"It is the parent"s method"。
子组件模板定义属于子组件作用域，点击这个部分，会调用子组件方法，输出"It is the child"s method"

在内容分发的过程中，父组件分发的内容可以使用定义在子组件模板上的属性（即插口作用域上定义的属性）。如，在父组件分发内容上，可以通过slot-scope="obj"获取到所有在插口上定义的属性，通过{{obj.slotval}}就可以在slot-scope内部使用这个数据。
特殊的，在