在介绍槽前,需要先知道一个概念:编译的作用域。比如父组件中有如下模板:
& lt; child-component>
{{消息}}
& lt; child-component>
这里的消息就是一个位置,但是它绑定的是父组件的数据,而不是组件<代码> & lt;子组件在的数据。
父组件模板的内容是在父组件作用域内编译,子组件模板的内容是在子组件作用域内编译。
& lt; div id=坝τ谩北?
& lt;子组件v-show=" showChild "祝辞& lt;/child-component>
& lt;/div>
& lt; script>
Vue.component(子组件,{
模板:“& lt; div>子组件& lt;/div>”
});
应用var=new Vue ({
埃尔:“#应用”,
数据:{
showChild:真
}
});
& lt;/script>
这里的状态showChild绑定的是父组件的数据,如果想在子组件上绑定,那应该是:
& lt; div id=坝τ谩北?
& lt; child-component> & lt;/child-component>
& lt;/div>
& lt; script>
Vue.component(子组件,{
模板:“& lt; div v-show=皊howChild祝辞子组件& lt;/div>”,
数据:函数(){
showChild:真
}
});
应用var=new Vue ({
埃尔:“#应用”
});
& lt;/script>
因此,槽分发的内容,作用域是在父组件上的。
单个槽:
在子组件使用特殊的& lt;槽在元素就可以为这个子组件开启一个槽(插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的& lt;槽在标签及它的内容。
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt; title>单个slot
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; cild-component>
& lt; p>分发的内容& lt;/p>
& lt; p>更多分发的内容& lt;/p>
& lt;/cild-component>
& lt;/div>
& lt; script>
Vue.component(子组件,{
模板:“\
& lt; div> \
& lt; slot> \
& lt; p>如果父组件没有插入内容,我将作为默认出现& lt;/p> \
& lt;/slot> \
& lt;/div>
});
应用var=new Vue ({
埃尔:“#应用”
});
& lt;/script>
& lt;/body>
& lt;/html>
子组件子组件的模板内定义了一个& lt;槽在元素,并且用一个& lt;p在作为默认的内容,在父组件没有使用槽时,会渲染这段默认的文本;如果写入了位置,那就会替代整个& lt;槽在标签。
上面示例渲染后的结果为:
& lt; div id=坝τ谩北?
& lt; div>
& lt; p>分发的内容& lt;/p>
& lt; p>更多分发的内容& lt;/p>
& lt;/div>
& lt;/div>
注意:子组件& lt;槽在内的为备用内容,它的作用域是子组件本身。
给& lt;槽在元素指定一个名字后可以分发多个内容,具名槽可以与单个槽共存。
& lt; div id=癿yApp”比;
& lt; child-component>
& lt; h3槽="头"祝辞标题& lt;/h3>
& lt; p>正文内容& lt;/p>
& lt; p>更多的正文内容& lt;/p>
& lt; div槽=耙辰拧痹诘撞啃畔? lt;/div>
& lt;/child-component>
& lt;/div>
& lt; script>
Vue.component(子组件,{
模板:“\
& lt; div类="容器"祝辞\
& lt; div类="头"祝辞\
& lt;槽名称="头"祝辞& lt;/slot> \
& lt;/div> \
& lt; div类="主"祝辞\
& lt; slot> & lt;/slot> \
& lt;/div> \
& lt; div类=耙辰拧弊４荺
& lt;槽的名字=耙辰拧弊４? lt;/slot> \
& lt;/div> \
& lt;/div>
});
var myApp=new Vue ({
埃尔:“# myApp”
});
& lt;/script>
子组件内声明了3个& lt;槽在元素,其中在& lt;div类=爸饕北?内的& lt;槽在没有使用名字特性,它将作为默认槽出现,父组件没有使用槽特性的元素与内容都将出现在这里。
如果没有制定默认的匿名位置,父组件内多于的内容片断都将被抛弃。
渲染结果:
& lt; div类="容器"比;
& lt; div类="头"比;
& lt; h3>标题& lt;/h3>
& lt;/div>
& lt; div类=爸饕北?
& lt; p>正文内容& lt;/p>
& lt; p>更多的正文内容& lt;/p>
& lt;/div>
& lt; div类=耙辰拧北?
& lt; div槽=耙辰拧痹诘撞啃畔? lt;/div>
& lt;/div>
& lt;/div>
