vue之slot内容分发
一、一般定义子组件情况：
<body>
<div id="app">
<child>
<span>123456</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div>我是子组件</div>"
}
}
});
</script>
</body>
浏览器打开：<span>123456</span>内容不会显示，界面只显示：我是子组件
注：虽然<span>标签被子组件的child标签所包含，但由于他不在子组件的template属性中，因此不属于子组件
二、单个slot
在template中添加<slot></slot>标签
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot></slot>我是子组件</div>"
}
}
});
</script>
浏览器打开发现<span>标签内容显示出来了，如图：
将<slot>标签再换个位置：template:"<div>我是子组件<slot></slot></div>"，如图：
三、具名slot
<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。
使用：（1）父组件要在分发的标签中添加属性"slot=name名"
（2）子组件在对应分发位置上的slot标签添加属性"name=name名"
代码如下：
<body>
<div id="app">
<child>
<span slot="one">123456</span>
<span slot="two">abcdef</span>
</child>
</div>
<script>
new Vue({
el:'#app',
components:{
child:{
template:"<div><slot name='two'></slot>我是子组件<slot name='one'></slot></div>"
}
}
});
</script>
</body>
浏览器打开，界面如下：
总结：slot分发其实就是父组件需要在子组件内放一些DOM，它就是负责这些DOM是否显示，在哪个地方显示的。
posted on 2017-05-02 13:51 zhoujian917 阅读(1499) 评论(0) 编辑 收藏 举报
