VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂，适合新手

2023-11-15 21:19:46

1. 概述

相关定律告诉我们：这个世界上的任何事物之间都会存在一定联系，“城门失火，殃及池鱼”就是一个很好的例子。因此如果我们能够尽早发现这些看不见的联系，就能很好的解决更多遇见的难题。

 

言归正传，之前我们聊过如何在子组件中去修改主组件传递的参数的值，当时是在子组件中重新声明一个新数据，初始值为父组件传参的值，然后对子组件的数据进行计算。

今天我们使用事件的方式来实现对父组件的传参进行修改。

 

2. 组件间事件通信

2.1 子组件接收参数并实现自增

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        template:`
            <div>
                <test :num="num" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.num++;
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });
    const vm = app.mount("#myDiv");

这个例子咱们之前聊过，父组件有一个数据 num，父组件将这个参数传给 test 子组件，子组件使用 props:['num'] 的方式接收后，在事件方法中对其自增

VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂，适合新手

 

 很明显，自增时会报错，因为父组件传过来的 num 是只读的，子组件不能对其进行修改。

 

2.2 子组件中声明新的数据，将父组件的num作为初始值

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        template:`
            <div>
                <test :num="num" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        data() {
            return {
                myNum : this.num
            }
        },
        methods : {
            incrNum() {
                // this.num++;
                this.myNum++;
            }
        },
        template:`
            <div @click="incrNum" >{{myNum}}</div>
        `
    });

这是我们上节课的解决方案，在子组件中声明 myNum，把num当做初始值，然后自增 myNum，显示时也显示 myNum

VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂，适合新手

 

很明显，这样做是可以的

 

2.3 子组件调用父组件的方法

既然子组件无权修改父组件传过来的参数，那我们就让父组件自己去修改这个参数

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        methods : {
            handleIncr() {
                this.num++;
            }
        },
        template:`
            <div>
                <test :num="num" @incrNum="handleIncr" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.$emit('incrNum')
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });

这个例子中，父组件在使用子组件时，绑定了一个事件 incrNum，这个事件会调用父组件的 handleIncr 方法，这个方法中对数据 num 进行了自增。

子组件在自己的 incrNum 方法中使用 this.$emit('incrNum') 触发了父组件的 incrNum 事件，然后该事件调用父组件的 handleIncr 方法，对父组件的数据 num 进行修改。

父组件修改了数据 num，这个数据 num 修改后的值会传递给子组件，从而实现对 num 参数的修改。

 

说了这么一大堆，简单看就是子组件通过某种手段调用了父组件的方法。

VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂，适合新手

 

经试验，完全没用问题，可以修改 num 的值

 

2.4 子组件调用父组件的方法，且传参

光调用还不行，我们还要传参

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        methods : {
            handleIncr(param1) {
                this.num += param1;
            }
        },
        template:`
            <div>
                <test :num="num" @incrNum="handleIncr" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.$emit('incrNum', 2)
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });

这个例子中，我们根据传参的值，决定自增多少。

在 this.$emit('incrNum', 2) 这句代码中，除了指明触发的事件，还传了一个参数，父组件的 handleIncr(param1) 这个方法，就可以接收这个参数，并使用

 

2.5 子组件调用父组件的方法，且传多个参数

这次我们要传多个参数，当然也是可以的

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        methods : {
            handleIncr(param1, param2) {
                this.num += param2;
            }
        },
        template:`
            <div>
                <test :num="num" @incrNum="handleIncr" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.$emit('incrNum', 2, 3)
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });

这么传：this.$emit('incrNum', 2, 3)，这么收：handleIncr(param1, param2)，以此类推

 

2.6 计算逻辑放在子组件中

自增本来是子组件的业务，我们不想把这个逻辑放到父组件中，耦合性太强了，我们可以这么写

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        methods : {
            handleIncr(param1) {
                this.num = param1;
            }
        },
        template:`
            <div>
                <test :num="num" @incrNum="handleIncr" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.$emit('incrNum', this.num + 1)
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });

其实就是传参时在子组件中计算好了，然后父组件直接赋值就好

 

2.7 通过 v-model 的方式，修改父组件数据的值

上面的例子中，我们通过子组件调用父组件的方法去修改父组件数据的值，耦合性还是有点强，父组件需要去为子组件写一个方法。

其实还有一个更简洁的办法，就是通过 v-model 的方式，来看下面的例子

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        template:`
            <div>
                <test v-model="num" />
            </div>
        `
    });
    app.component("test", {
        props:['modelValue'],
        methods : {
            incrNum() {
                this.$emit('update:modelValue', this.modelValue + 1);
            }
        },
        template:`
            <div @click="incrNum" >{{modelValue}}</div>
        `
    });

这个例子中，父组件使用 test 子组件时，使用 v-model="num" 的方式来传参。

test 子组件接收时，使用 props:['modelValue'] 的方式接收，注意：modelValue 是一个固定写法。

在子组件的自增方法中使用 this.$emit('update:modelValue', this.modelValue + 1); 的形式去修改 modelValue 的值，注意：update:modelValue 是固定写法。

 

2.8 使用 num 替换 modelValue

上面的例子有点不好理解，无缘无故蹦出个 modelValue，父组件明明传的是 num，为啥我接受要用 modelValue，太奇怪了

下面的例子更易于我们的理解

    const app = Vue.createApp({
        data() {
            return {
                num : 1
            }
        },
        template:`
            <div>
                <test v-model:num="num" />
            </div>
        `
    });
    app.component("test", {
        props:['num'],
        methods : {
            incrNum() {
                this.$emit('update:num', this.num + 1);
            }
        },
        template:`
            <div @click="incrNum" >{{num}}</div>
        `
    });

这个例子就好理解多了，首先父组件使用 test 子组件时，使用 v-model:num="num" 进行传参。

子组件接收时，接收的就是 num，使用 props:['num'] 接收。

最后使用 this.$emit('update:num', this.num + 1);  代码对接收到的 num 进行修改。

显示时显示的也是 num，{{num}}

 

这样写就清爽很多，父组件没有 method，子组件相当于自己对接收到的参数 num 进行操作，耦合度降低了很多。

 

3. 综述

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

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

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

 

4. 个人公众号

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

VUE3 之 组件间事件通信 - 这个系列的教程通俗易懂，适合新手

上一篇：多字段模糊匹配 -->搜索功能（mysql原生语句实现）


下一篇：Vue3+TS给props声明类型用到泛型的问题