VUE3 之插槽的使用

目录1. 概述2. 插槽的使用3. 综述4. 个人公众号1. 概述非理性定律告诉我们：人们总是习惯于以情感去判断眼前的事物，非理性的去做决定。对于长远的利益，人们更愿意去选择短期的利益。因此在做决定前要让自己冷静，理性的分析，让自己看的更远。言归正传，今天我们来聊一个新的概念 —— 插槽。2. 插槽的使用2.1 一个简单的例子我们先来看一个简单的例子<body><div id="

追风人聊Java

3736人浏览 · 2022-01-28 21:47:26

追风人聊Java · 2022-01-28 21:47:26 发布

1. 概述

非理性定律告诉我们：

人们总是习惯于以情感去判断眼前的事物，非理性的去做决定。

对于长远的利益，人们更愿意去选择短期的利益。

因此在做决定前要让自己冷静，理性的分析，让自己看的更远。

言归正传，今天我们来聊一个新的概念 —— 插槽。

2. 插槽的使用

2.1 一个简单的例子

我们先来看一个简单的例子

<body>
    <div id="myDiv"></div>
</body>
<script>
        
    const app = Vue.createApp({
        template:`
            <div>
                <my-form />
            </div>
        `
    });
    app.component("my-form", {
        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <button @click="myClick">提交</button>
            </div>
        `
    });
    const vm = app.mount("#myDiv");

这个例子很简单，我们在子组件中写了一个文本框，文本框的后面是一个按钮，点击按钮会 alert 一个提示

2.2 父组件决定按钮的样式

如果我们希望子组件更灵活、复用性更强，子组件按钮的样式可以由父组件去改变，该怎样做呢，我们看下面的例子

    const app = Vue.createApp({
        template:`
            <div>
                <my-form>
                    <div>提交</div>
                </my-form>
                <my-form>
                    <button>提交</button>
                </my-form>
            </div>
        `
    });

    app.component("my-form", {
        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <slot @click="myClick"></slot>
            </div>
        `
    });

这里我们使用了插槽（slot）的概念，父组件使用子组件时，组件标签中间的部分就是插槽的内容，

例如：<my-form><div>提交</div></my-form> 中，<div>提交</div> 就是插槽的内容

子组件定义时，可以使用 <slot /> 获取到父组件定义的插槽的内容

这个例子中，父组件使用了两次 my-form 子组件，但按钮的样式是不同的。

但这个例子中有一个问题，我们会发现点击【提交】按钮没有任何效果，这是因为 slot 标签是不能直接绑定事件的，下面我们来解决这个问题

2.3 插槽绑定事件

slot 标签不能直接绑定事件，通常的做法是在外层加一个 span 标签，然后把事件绑定到 span 标签上

const app = Vue.createApp({
        template:`
            <div>
                <my-form>
                    <div>提交</div>
                </my-form>
                <my-form>
                    <button>提交</button>
                </my-form>
            </div>
        `
    });

    app.component("my-form", {
        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <span @click="myClick">
                    <slot></slot>
                </span>
            </div>
        `
    });

2.4 子组件作为插槽的内容

插槽的内容，可以是普通标签、普通字符串，也可以是其他的子组件

    const app = Vue.createApp({
        template:`
            <div>
                <my-form>
                    <my-button />
                </my-form>
            </div>
        `
    });

    app.component("my-button", {
        template: `
            <div>my-button组件按钮</div>
        `
    });

    app.component("my-form", {
        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <span @click="myClick">
                    <slot></slot>
                </span>
            </div>
        `
    });

这个例子中，我们在 my-button 组件中定义了一个 div按钮，然后在父组件中把 <my-button /> 作为插槽的内容，VUE 是支持的

2.5 插槽中使用数据

插槽中也是可以使用数据的

    const app = Vue.createApp({
        data() {
            return {
                buttonName : '提交'
            }
        },
        template:`
            <div>
                <my-form>
                    <div>{{buttonName}}</div>
                </my-form>
                <my-form>
                    <button>{{buttonName}}</button>
                </my-form>
            </div>
        `
    });
    app.component("my-form", {

        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <span @click="myClick">
                    <slot></slot>
                </span>
            </div>
        `
    });

这个例子中，插槽内容中的按钮的名称，取自父组件的数据 buttonName

注意：父组件中的插槽内容使用的是父组件的数据，而不是子组件的数据。也就是说，插槽的机制是：先用数据替换好插槽内容后，再传到子组件。

2.6 插槽的默认值

如果父组件想省事，不想指定子组件的按钮样式，此时，就需要我们指定插槽的默认内容

    const app = Vue.createApp({
        data() {
            return {
                buttonName : '提交'
            }
        },
        template:`
            <div>
                <my-form />
            </div>
        `
    });
    app.component("my-form", {

        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <input />
                <span @click="myClick">
                    <slot>默认提交按钮</slot>
                </span>
            </div>
        `
    });

指定插槽的默认内容很简单，在子组件的 slot 标签中间，写上默认内容即可，当父组件不指定插槽内容时，则使用该内容作为插槽内容

2.7 具名插槽

如果子组件分为 header、main、footer 3个部分，header 和 footer 由父组件决定，header 放在 main 的上方， footer 放在 main 组件的下方，该如何做呢，看下面的例子

    const app = Vue.createApp({
        data() {
            return {
                buttonName : '提交'
            }
        },
        template:`
            <div>
                <my-html>
                    <template v-slot:header>
                        <div>header</div>
                    </template>
                    <template v-slot:footer>
                        <div>footer</div>
                    </template>
                </my-html>
            </div>
        `
    });

    app.component("my-html", {

        methods:{
            myClick() {
                alert('提交');
            }
        },
        template: `
            <div>
                <slot name="header" />
                <div>main</div>
                <slot name="footer" />
            </div>
        `
    });

首先，父组件使用子组件时，使用 template 标签包住 header 的内容，在 template 标签中使用 v-slot:header 为该部分插槽命名。

子组件中，使用 <slot name="header" /> 指定插槽的位置。

footer 部分类似

3. 综述

今天聊了一下 VUE3 的插槽的使用，希望可以对大家的工作有所帮助，下一节我们继续讲组件的相关知识，敬请期待

欢迎帮忙点赞、评论、转发、加关注：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^