摘要：綁定到子組件屬性綁定到父組件屬性在子組件模板內(nèi)將指令綁定到子組件屬性列表第一項(xiàng)，由于父組件找不到屬性，將不會(huì)顯示。哪都通快遞龍虎山天師府曜星社內(nèi)容分發(fā)中的被插入中，并且因?yàn)橹械闹噶疃M(jìn)行迭代，迭代之后通過(guò)獲取上的屬性數(shù)據(jù)。

父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。

父子組件的編譯相互獨(dú)立，編譯時(shí)只能使用各自作用域中的屬性和方法，例如，你不可以在父組件模板內(nèi)，將一個(gè)指令綁定到子組件的屬性或方法上。如果這么做控制臺(tái)會(huì)報(bào)一個(gè)屬性未定義的錯(cuò)誤。

如果想要綁定一個(gè)指令以便控制子組件的行為，那么你可以在子組件的模板內(nèi)，將一個(gè)指令綁定到子組件的屬性或方法上；或者在父組件的模板內(nèi)，將指令綁定到父組件的屬性或方法上。

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
                }
            }
        }
    }
})

  

    
綁定到子組件屬性:
    
綁定到父組件屬性:
    
在子組件模板內(nèi)將指令綁定到子組件屬性:
  

列表第一項(xiàng)，由于父組件找不到屬性childIsShow，將不會(huì)顯示。

將父組件的內(nèi)容插入子組件模板的方式，我們稱為內(nèi)容分發(fā)。
默認(rèn)情況下，在子組件中插入的父組件內(nèi)容是不顯示的。

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

  
    {{ message }}
  

內(nèi)容分發(fā)失敗，message不會(huì)顯示。

如果想使用內(nèi)容分發(fā)，將父組件內(nèi)容插入到子組件的模板中，必須在子組件的模板內(nèi)標(biāo)記一個(gè)備選內(nèi)容，父組件將找到這個(gè)備選內(nèi)容標(biāo)記，并將自己的內(nèi)容替換備選內(nèi)容。
如果父組件沒(méi)有待分發(fā)的內(nèi)容，備選內(nèi)容成為最終渲染的結(jié)果。

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

                
子組件內(nèi)容
                
子組件內(nèi)容
                
插口備選內(nèi)容
                
子組件內(nèi)容
                
子組件內(nèi)容
            
"
        }
    }
})

  
父組件標(biāo)題
  
    
父組件插入內(nèi)容
  

單插口模式做內(nèi)容分發(fā)，只能一股腦把套入子模板的內(nèi)容插入到有標(biāo)記的地方。
而具名插口在內(nèi)容和slot上都做上標(biāo)記，對(duì)應(yīng)的內(nèi)容只能分發(fā)到對(duì)應(yīng)的slot上。
標(biāo)記內(nèi)容用slot="tag"； 標(biāo)記slot用

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

                

                    
                
                

                    
                
                
                

            
"
        }
    }
})

  
    
我來(lái)組成頭部
    
沒(méi)被標(biāo)記的slot都我插
    
我來(lái)組成腿部
  

以上定義了兩個(gè)個(gè)不具名的插口，雖然這里顯示正確，但是控制臺(tái)報(bào)錯(cuò)，說(shuō)定義重復(fù)的默認(rèn)插口會(huì)有不預(yù)期的錯(cuò)誤

根據(jù)具名插口，再來(lái)看個(gè)組件作用域的例子

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:"
                
                    
                    子組件模板定義部分①|(zhì)
                    
                    子組件模板定義部分②
                "
        }
    }
})

  
      內(nèi)容分發(fā)部分①|(zhì)  
      內(nèi)容分發(fā)部分②|  
  

內(nèi)容分發(fā)部分屬于父組件作用域，因此點(diǎn)擊按鈕的內(nèi)容分發(fā)部分，會(huì)調(diào)用父組件方法，輸出"It is the parent"s method"。
子組件模板定義屬于子組件作用域，點(diǎn)擊這個(gè)部分，會(huì)調(diào)用子組件方法，輸出"It is the child"s method"

在內(nèi)容分發(fā)的過(guò)程中，父組件分發(fā)的內(nèi)容可以使用定義在子組件模板上的屬性（即插口作用域上定義的屬性）。如，在父組件分發(fā)內(nèi)容上，可以通過(guò)slot-scope="obj"獲取到所有在插口上定義的屬性，通過(guò){{obj.slotval}}就可以在slot-scope內(nèi)部使用這個(gè)數(shù)據(jù)。
特殊的，在