目录

1. 概述

2. 插槽的使用

3. 综述

4. 个人公众号


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,欢迎大家关注

Logo

前往低代码交流专区

更多推荐