组件:slot插槽
知识点
- slot
slot
slot是父组件与子组件的通讯方式,可以将父组件的内容显示在子组件当中。
综合例
<div id="myApp">
<say-to pname="koma">
你的视频做的太差了。
</say-to>
<say-to pname="mike">
你千万不要学koma。
</say-to>
<say-to pname="john">
你教教他们两个吧。
</say-to>
</div>
<script>
Vue.component('say-to', {
props: ['pname'],
template: '<div>'
+ '你好,<strong>{{pname}}</strong>!'
+ '<slot></slot>'
+ '</div>',
});
var myApp = new Vue({
el: '#myApp',
});
</script>
显示:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200906194349660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MjMwNA==,size_16,color_FFFFFF,t_70#pic_center)
组件:组合slot
知识点
- slot命名
slot命名
在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据。
综合例
<div id="myApp">
<nba-all-stars c="奥尼尔" pf="加内特">
<span slot="sf">皮尔斯</span>
<span slot="sg">雷阿伦</span>
<span slot="pg">隆多</span>
</nba-all-stars>
</div>
<script>
Vue.component('nba-all-stars', {
props: ['c', 'pf'],
template: '<div>'
+ '<div>中锋:{{c}}</div>'
+ '<div>大前:{{pf}}</div>'
+ '<div>小前:<slot name="sf"></slot></div>'
+ '<div>分卫:<slot name="sg"></slot></div>'
+ '<div>控卫:<slot name="pg"></slot></div>'
+ '</div>',
});
var myApp = new Vue({
el: '#myApp',
});
</script>
显示: