首页手记【九月打卡】第15天 Vue3框架

【九月打卡】第15天 Vue3框架

标签：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第3章探索组件的理念

主讲老师：Dell

课程内容：

今天学习的内容包括：

作用域插槽
#插槽名
Es6解构语法
itemProps
编程练习

课程收获：

具名插槽的简写方法在template标签中

v-slot:插槽名 ==> #插槽名

<div>header</div>

</template>

<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>