组件化开发—作用域插槽
(1) 默认插槽:又名匿名插槽,当slot没有指定name属性值的时候一个默认显示插槽,一个组件内只有有一个匿名插槽。
(2) 具名插槽:带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽。
(3)作用域插槽:默认插槽、具名插槽的一个变体,可以是匿名插槽,也可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时,
可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。
子组件:
let Child = {
template: '#child',
data() {
return {
list: [{
id: 1,
name: '网易',
}, {
id: 2,
name: '腾讯',
}, {
id: 3,
name: '优酷',
}, {
id: 4,
name: '搜狐',
}]
}
}
}
根组件:
let vm = new Vue({
el: '#app',
data: {},
components: {
Child
}
})
视图层子组件:
1、 :value="item.id"是向父组件传输数组数据
<template id="child">
<div>
<p>child子组件</p>
<slot v-for="item in list" :value="item"></slot>
</div>
</template>
2、 slot-scope是用来接收子组件传输来的数据
3、取出数据
<div id="app">
<child>
<template slot-scope="date">
<ul>
<li>{{date.value.id}}</li>
<li>{{date.value.name}}</li>
</ul>
</template>
</child>
</div>
代码演示:
除了slot-scope来向父组件传输数据,还可以用到v-slot:default和#default用法与slot-scope一致
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果