- 阐述
- 编写基础结构
- 初识插槽
- 插槽中使用子组件
- 插槽中使用动态数据
这节学习的内容是组件中的插槽(Slot)使用。 为了更生动的理解插槽，我们使用大宝剑选择技师的案例。
DOCTYPE html>
Demo31
const app = Vue.createApp({
template: ` 欢迎光临大宝剑-请选择您的技师`
})
const vm = app.mount("#app")
这是最基本的一个Vue3的代码，只有一个模板template。 然后我们新建一个全局的子组件。 子组件叫做技师组件，里边只有一个最简单的模板。
app.component('JiShi', {
template: `
经过你的慎重考虑.最终选择了。
xxx
`
})
有了子组件后，在父组件中调用这个子组件。
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
`
})
这时候的 XXX，当然可以通过属性传递和接受的方式获得，这种方法你已经掌握了，这节我们学习一下用插槽的方式 slot。
DOCTYPE html>
Demo31
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
`
})
app.component('JiShi', {
template: `
经过你的慎重考虑.最终选择了。
xxx
`
})
const vm = app.mount("#app")
插槽的声明很简单，只要在子组件中加入标签即可，然后在父组件中使用双标签进行调用。
具体代码如下:
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
小红
`
})
app.component('JiShi', {
template: `
经过你的慎重考虑.最终选择了。
`
})
const vm = app.mount("#app")
这时候去浏览器可以看到，页面出现了我们想要的结果。
你可以让页面更丰富，因为插槽支持任何的DOM元素，比如我们加入一个 比如现在调用两次 插槽可以强大到直接使用 可以先声明一个最简单的子组件。 这个子组件叫做 有了组件后直接可以在父组件的插槽中进行使用。 代码如下： 浏览器中预览，可以看到确实插槽中是可以放置子组件的。 插槽中也可以直接使用动态数据，也就是我们常说的数据项，比如定义一个数据项，然后在插槽中使用，直接就可以使用了。 这时候需要注意的是一个变量作用域的问题，比如我们子组件里也有一个数据项 这时候你会发现，浏览器中仍然显示的是 这节学习的内容就到这里了，这节算是一个初识，下节我们继续学习插槽相关的知识。50像素的字体大小。
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
组件，给与不同的样式也是可以的。const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
插槽中使用子组件
DOCTYPE html>
Demo31
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
子组件，接下来就做一个在插槽中使用子组件的小例子。project，也就是项目的意思，是为了展示我们选择技师后所作的项目。app.component('project', {
template: `项目是按摩足疗`
})
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
插槽中使用动态数据
Demo31
const app = Vue.createApp({
template: `
欢迎光临大宝剑-请选择您的技师
const app = Vue.createApp({
data() {
return {
jishi: '晓红'
}
},
template: `
欢迎光临大宝剑-请选择您的技师
jishi，然后给他赋值为小丽。app.component('JiShi', {
data() {
return {
jishi: '小丽'
}
},
template: `
晓红，这时候我们得出了一个结论，也是方便你记忆。DOCTYPE html>
Demo31
const app = Vue.createApp({
data() {
return {
jishi: '晓红'
}
},
template: `
欢迎光临大宝剑-请选择您的技师
