飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

VUE3 之 插槽的使用 - 这个系列的教程通俗易懂，适合新手

时间：2022-01-30  作者：w84422  

1. 概述

非理性定律告诉我们：

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

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

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

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

2. 插槽的使用

2.1 一个简单的例子

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

<body>
    <div id="myDiv"></div>
</body>
<script>
        
    const app = 域名teApp({
        template:`
            <div>
                <my-form />
            </div>
        `
    });
    域名onent("my-form", {
        methods:{
            myClick() {
                alert(\'提交\');
            }
        },
        template: `
            <div>
                <input />
                <button @click="myClick">提交</button>
            </div>
        `
    });
    const vm = 域名t("#myDiv");

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

2.2 父组件决定按钮的样式

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

    const app = 域名teApp({
        template:`
            <div>
                <my-form>
                    <div>提交</div>
                </my-form>
                <my-form>
                    <button>提交</button>
                </my-form>
            </div>
        `
    });

    域名onent("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 = 域名teApp({
        template:`
            <div>
                <my-form>
                    <div>提交</div>
                </my-form>
                <my-form>
                    <button>提交</button>
                </my-form>
            </div>
        `
    });

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

 

2.4 子组件作为插槽的内容

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

    const app = 域名teApp({
        template:`
            <div>
                <my-form>
                    <my-button />
                </my-form>
            </div>
        `
    });

    域名onent("my-button", {
        template: `
            <div>my-button组件按钮</div>
        `
    });

    域名onent("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 = 域名teApp({
        data() {
            return {
                buttonName : \'提交\'
            }
        },
        template:`
            <div>
                <my-form>
                    <div>{{buttonName}}</div>
                </my-form>
                <my-form>
                    <button>{{buttonName}}</button>
                </my-form>
            </div>
        `
    });
    域名onent("my-form", {

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

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

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

2.6 插槽的默认值

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

    const app = 域名teApp({
        data() {
            return {
                buttonName : \'提交\'
            }
        },
        template:`
            <div>
                <my-form />
            </div>
        `
    });
    域名onent("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 = 域名teApp({
        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>
        `
    });

    域名onent("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，欢迎大家关注

标签：前端编程
搜你所爱
大家在看
热搜标签
网站地图 | 注册 | 投稿
白菜窝
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络，如有侵权，请联系删除。