31. [组件]Vue组件中Slot插槽的使用1

目录
文章目录隐藏
  1. 编写基础结构
  2. 初识插槽
  3. 插槽中使用子组件
  4. 插槽中使用动态数据

这节学习的内容是组件中的插槽(Slot)使用。为了更生动的理解插槽,我们使用大宝剑选择技师的案例。

编写基础结构

为了更好的讲解,我们新建一个文件Demo31.html,可以复制下面最基本的文件结构。复制好后,我们再编写其他代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo31</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        template: ` <h2>欢迎光临大宝剑-请选择您的技师</h2>`
    })

    const vm = app.mount("#app")
</script>

</html>

这是最基本的一个 Vue3 的代码,只有一个模板template。然后我们新建一个全局的子组件。子组件叫做技师组件,里边只有一个最简单的模板。

app.component('JiShi', {
    template: `
        <div>
            <span>经过你的慎重考虑.最终选择了。</span>
            <span>
                xxx
            </span>
        </div>
    `
})

有了子组件后,在父组件中调用这个子组件。

const app = Vue.createApp({
    template: `
        <h2>欢迎光临大宝剑-请选择您的技师</h2>
        <ji-shi />
        `
})

这时候的XXX,当然可以通过属性传递和接受的方式获得,这种方法你已经掌握了,这节我们学习一下用插槽的方式slot

初识插槽

插槽的声明很简单,只要在子组件中加入<slot></slot>标签即可,然后在父组件中使用双标签进行调用。具体代码如下:

<script>
    const app = Vue.createApp({
        template: `
        <h2>欢迎光临大宝剑-请选择您的技师</h2>
        <ji-shi > 小红 </ji-shi>
        `
    })

    app.component('JiShi', {
        template: `
        <div>
            <span>经过你的慎重考虑.最终选择了。</span>
            <span>
                <slot> </slot>
            </span>
        </div>
    `
    })

    const vm = app.mount("#app")
</script>

这时候去浏览器可以看到,页面出现了我们想要的结果。你可以让页面更丰富,因为插槽支持任何的 DOM 元素,比如我们加入一个<div>然后让字体变成红色和 50 像素的字体大小。

const app = Vue.createApp({
    template: `
    <h2>欢迎光临大宝剑-请选择您的技师</h2>
    <ji-shi > <div style="color:red;font-size:50px;">小红/div> </ji-shi>
    `
})

比如现在调用两次<ji-shi>组件,给与不同的样式也是可以的。

const app = Vue.createApp({
        template: `
    <h2>欢迎光临大宝剑-请选择您的技师</h2>
    <ji-shi > <div style="color:red;font-size:50px;">小红</div> </ji-shi>
    <ji-shi > <div style="color:green;font-size:50px;">小影</div> </ji-shi>
    `
})

插槽中使用子组件

插槽可以强大到直接使用子组件,接下来就做一个在插槽中使用子组件的小例子。可以先声明一个最简单的子组件。这个子组件叫做project,也就是项目的意思,是为了展示我们选择技师后所作的项目。

app.component('project', {
    template: `<span style="color:blue;">项目是按摩足疗</span>`
})

有了组件后直接可以在父组件的插槽中进行使用,代码如下。

const app = Vue.createApp({
    template: `
        <h2>欢迎光临大宝剑-请选择您的技师</h2>
        <ji-shi > 
                <div style="color:red;font-size:50px;">
                    小红,<project />
                </div>
        </ji-shi>
        <ji-shi > <div style="color:green;font-size:50px;">小影</div> </ji-shi>
        `
})

浏览器中预览,可以看到确实插槽中是可以放置子组件的。

插槽中使用动态数据

插槽中也可以直接使用动态数据,也就是我们常说的数据项,比如定义一个数据项,然后在插槽中使用,直接就可以使用了。

const app = Vue.createApp({
    data() {
        return {
            jishi: '晓红'
        }
    },
    template: `
        <h2>欢迎光临大宝剑-请选择您的技师</h2>
        <ji-shi > 
                <div style="color:red;font-size:50px;">
                    {{jishi}},<project />
                </div>
        </ji-shi>
        <ji-shi > <div style="color:green;font-size:50px;">小影</div> </ji-shi>
    `
})

这时候需要注意的是一个变量作用域的问题,比如我们子组件里也有一个数据项jishi,然后给他赋值为小丽

app.component('JiShi', {
    data() {
        return {
            jishi: '小丽'
        }
    },
    template: `
    <div>
        <span>经过你的慎重考虑.最终选择了。</span>
        <span>
            <slot> </slot>
        </span>
    </div>
`
})

这时候你会发现,浏览器中仍然显示的是晓红,这时候我们得出了一个结论,也是方便你记忆。

  • 父模板里调用的数据属性,使用的都是父模板里的数据
  • 子模板里调用的数据属性,使用的都是子模板里的数据

这节学习的内容就到这里了,这节算是一个初识,下节我们继续学习插槽相关的知识。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 31. [组件]Vue组件中Slot插槽的使用1

发表回复