使用slot分發內容 作用域插槽

除非子組件模板包含至少一個<slot>插口，否則父組件的內容將會別丟棄。當子組件模板只有一個沒有屬性的slot時，父組件整個內容片斷將插入到slot所在的DOM位置，並替換掉slot標簽本身。

最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

 

 

作用域插槽是一種特殊類型的插槽，用作使用一個（能夠傳遞數據到）可重用模板替換已渲染元素。

在子組件中，只需將數據傳遞到插槽，就像你將 prop 傳遞給組件一樣：

在父級中，具有特殊屬性scope的<template>元素，表示它是作用域插槽的模板，scope的值對應一個臨時變量名，此變量接受從子組件傳遞的prop對象

demo:

var app=new Vue({

　　el:'#app',

　　components:{　　　　　　

　　　　'scope-component2':{
　　　　　　　　template:'<div><p>this is a child</p><slot text="this info from child"></slot></div>'

　　　　}

　　}
});

html

<scope-component2>
      <template scope="props">
        <p>{{props.text}}</p>
       </template>
    </scope-component2>