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

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

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

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

列表第一項，由于父組件找不到屬性childIsShow，將不會顯示。

將父組件的內(nèi)容插入子組件模板的方式，我們稱為內(nèi)容分發(fā)。
默認情況下，在子組件中插入的父組件內(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不會顯示。

如果想使用內(nèi)容分發(fā)，將父組件內(nèi)容插入到子組件的模板中，必須在子組件的模板內(nèi)標記一個備選內(nèi)容，父組件將找到這個備選內(nèi)容標記，并將自己的內(nèi)容替換備選內(nè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)容
            
"
        }
    }
})

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

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

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

                

                    
                
                

                    
                
                
                

            
"
        }
    }
})

  
    
我來組成頭部
    
沒被標記的slot都我插
    
我來組成腿部
  

以上定義了兩個個不具名的插口，雖然這里顯示正確，但是控制臺報錯，說定義重復的默認插口會有不預期的錯誤

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

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

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