父组件向子组件传递dom元素,标签元素
<body>
<div id="app">
<child>
<p>11</p>
<span>22</span>
</child>
</div>
<script>
var child = {
template: `<div>
<slot></slot>
</div>`,
}
var vm = new Vue({
el: '#app',
components: {
child
},
})
</script>
slot的作用就是: 子组件中的 === 父组件中的
并且:子组件中还可以写标签的,注意在slot逻辑之前还是在逻辑之后
结果:
(3)如果父组件中没有传入标签,那么,slot标签的innerText才会生效
父组件中有标签元素,slot标签中的内容不生效
父组件中的没有标签元素,slot标签中的内容生效
(4)一个组件中多个插槽(具名插槽)
<div id="app">
<child>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</child>
</div>
<script>
var child = {
template: `<div>
<slot name="header"></slot>
<div class="cont">hello</div>
<slot name="footer"></slot>
</div>`,
}
var vm = new Vue({
el: '#app',
components: {
child
},
})
</script>
结果:
注意:具名插槽也是有默认值的。在父组件没有传入该具名的标签时,内容就由插槽的默认值决定
(5)作用域插槽
组件的复用程度更大的时候
<div id="app">
<child>
<template slot-scope="items">
<li>{{items.item}}</li>
</template>
</child>
</div>
<script>
var child = {
data: function(){
return {
list: [1,2,3,4]
}
},
template: `<div>
<ul>
<slot v-for="item of list" :item=item></slot>
</ul>
</div>`,
}
var vm = new Vue({
el: '#app',
components: {
child
},
})
</script>
代码结构:
list的值传入到子组件list中,item就是list的每一项,所有的item都传入template标签的items中,那么就可以通过items.item获取list中的每一项。注意template中的slot-scope是必写的属性。
这样,父组件中li可以替换,那么数据展示出来的形式就由父组件决定,比如:li标签换为span标签
结果: