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

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

标签：

Vue.js

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

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

主讲老师：Dell

课程内容：

今天学习的内容包括：

slot 插槽
templat
具名插槽v-slot:F
编程练习

课程收获：

slot 插槽

1）放在调用子组件内部的东西 ,

2）插槽内可以包含任何模板代码，包括 HTML、甚至其它的组件

3）如果子组件的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

4）slot插槽是不能绑定事件的，如果需要绑定事件可以在slot的外层加个<span>标签进行事件绑定。

示例中 mysection（子组件）标签中的

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