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 阅读(1500) 评论(0) 编辑 收藏 举报