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关键字快速知道本组件会向外传递哪些事件，毕竟组件多了后，会有一堆事件，在代码中一个个看的确比较费劲，这个模块还有一个功能就是校验我们可以在里面判断父组件传递过来的值，然后做些想做的操作。

本文地址：https://www.xunjs.com/vue/view_15213.html

Tags：通信组件之间事件