课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：第3章 探索组件的理念
主讲老师：Dell
课程内容：
今天学习的内容包括：
slot 插槽
templat
具名插槽v-slot:F
编程练习
课程收获：
slot 插槽
1）放在调用子组件内部的东西 ,
2）插槽内可以包含任何模板代码，包括 HTML、甚至其它的组件
3）如果子组件的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
4）slot插槽是不能绑定事件的，如果需要绑定事件可以在slot的外层加个<span>标签进行事件绑定。
示例中 mysection（子组件） 标签中的
<mysection>
<button> 提交 </button>
</mysection>就是要插在子组件中的东西
<script>
// slot 插槽
// 父模板里面调用的数据属性,使用的都是父模板里的数据
// 子模板里面调用的数据属性,使用的都是子模板里的数据
const app = Vue.createApp({
data() {
return {
text: '提交'
}
},
template: `
<mysection>
<div>{{text}}</div>
</mysection>
<mysection>
<button>{{text}}</button>
</mysection>
`
})
app.component('mysection', {
data() {
return {
text: '我是子模版里的text'
}
},
methods: {
handleClick() {
alert('111');
}
},
template: `
<div>
{{text}}
<input />
<span @click="handleClick">
<slot></slot>
<slot></slot>
</span>
</div>
`
})
const vm = app.mount('#root');
</script>
如果插槽不传值可以写一个默认值
具名插槽： 将一个slot拆成多个具名插槽，使标签、dom的传递更加灵活
具名插槽slot ：可以拆分两个 slot, 分别放在template 占位符里面，
<template v-slot:F>
<div>footer</div>
</template>
<slot name="F"></slot>
今天学习了slot插槽和具名插槽,在使用dom、标签的传递时，使用slot插槽进行传递会变得简单很多,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!