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

父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。

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

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

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內部使用這個數據。
特殊的，在