课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：第3章 探索组件的理念
主讲老师：Dell
课程内容：
今天学习的内容包括：
作用域插槽
#插槽名
Es6解构语法
itemProps
编程练习
课程收获：
具名插槽的简写方法 在template标签中
v-slot:插槽名 ==> #插槽名
<template v-slot:header>
<div>header</div>
</template>
<template #header>
<div>header</div>
</template>
作用域插槽：父组件调子组件的时候传slot进来，子组件再通过属性的形式，把数据传给子组件，父组件拿到内容时再显示
其中v-slot=‘itemProps’可以用解构语法简写 v-slot=‘{item}’
当子组件渲染的内容要由父组件决定的时候，可以使用作用域插槽，可以把父组件的item数据从子组件传递过来，父组件从理论上就可以调用子组件的数据
编程练习代码
<script>
const app = Vue.createApp({
data() {
return {
}
},
template: // Es6解构语法 <a-list v-slot="{item}"> <span>{{item}}</span>
// 子组件渲染的内容由父组件决定的时候,例如说如何展示这个列表,可以使用作用域的插槽来实现(可以通过父组件来调用子组件中的数据)
`
<a-list v-slot="slotProps">
<div>{{slotProps.item}}</div>
</a-list>
`
})
app.component('a-list', {
data() {
return {
list: [1,2,3]
}
},
template: `
<div>
<slot v-for="item in list" :item="item"></slot>
</div>
`
})
const vm = app.mount('#root');
</script>
<!-- <script>
const app = Vue.createApp({
data() {
return {
}
},
template: `
<a-list>
<template v-slot:B>
<span>11111111111</span>
</template>
<template v-slot:F>
<span>2222222222222</span>
</template>
</a-list>
`
})
app.component('a-list', {
data() {
return {
}
},
template: `
<slot name="B"></slot>
<br />
<slot name="F"></slot>
`
})
const vm = app.mount('#root');
</script> -->
今天学习了作用域插槽,具名插槽的简写,子组件渲染的内容由父组件决定的时候,例如说如何展示这个列表,可以使用作用域的插槽来实现会变得简单很多,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
