Vue父子组件之间事件通信怎么实现

2023-07-05 13:07:04 504人浏览独家记忆

摘要

这篇“Vue父子组件之间事件通信怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue父子组件之间事件通信怎么实现”文

这篇“Vue父子组件之间事件通信怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue父子组件之间事件通信怎么实现”文章吧。

示例解析

使用父组件传递过来的值做一个计数组件的时候，使用v-bind的方式传值，这个时候父子组件间是单向数据流的方式，即子组件无法修改父组件传来的值，所以做计数器组件的时候，子组件只能是拷贝一份父组件传来的值，然后做计数操作，本章我们提供事件的方式实现计数的功能，思想就是，我们修改不了父组件传递过来的值，我们就可以通过事件通知父组件修改这个值：代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta Http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>父子组件通过事件进行通信</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <div id="root"></div></body><script> const app = Vue.createApp({    data() {        return {            count:1        }    },    methods:{        handleAddOne(){            this.count += 1;        }    },        template:         `        <div>            <counter :count = "count" @add-one="handleAddOne" />        </div>        `    });    app.component('counter',{        props:['count'],        emits:{            addOne:(count) =>{                if(count > 3){                    alert(count);                    return true;                }                return false;            }        },        methods: {            handleItemClick(){                 this.$emit('addOne',this.count);            }        },        template:`<div @click="handleItemClick">{{count}}</div>`    });    const vm = app.mount('#root');</script></html>

当我们点击显示数字的div时，会执行执行handleItemClick方法，向父组件传递一个add-one事件，并且将目前的count值当成参数传递给父组件，父组件通过@add-one="handleAddOne"监听add-one事件，当收到这个事件后，就执行handleAddOne方法，让count的值加一，然后由于时count的值和子组件又是绑定的，所以这个值也会同步给子组件，这样就会在子组件显示count+1的值。

注意：监听事件，使用“-” 分隔符：如本例中的：@add-one，向外部发送一个事件时用驼峰命名：如本例中的：this.$emit('addOne',this.count);

从代码中我们可以看到从子组件向父组件传递一个事件使用的是$emit()方法，这个方法可以单独传事件如：this.$emit('addOne'); 也可以带参数传递：this.$emit('addOne',2);

另外本例中，我们可以看到这样一段代码：

   emits:{            addOne:(count) =>{                if(count > 3){                    alert(count);                    return true;                }                return false;            }        },

其实这里是便于让代码的阅读者能通过emmits关键字快速知道本组件会向外传递哪些事件，毕竟组件多了后，会有一堆事件，在代码中一个个看的确比较费劲，这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值，然后做些想做的操作。

以上就是关于“Vue父子组件之间事件通信怎么实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue父子组件之间事件通信怎么实现

本文链接: https://www.lsjlt.com/news/351789.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341