Vue.js的组件（三）父组件与子组件的数据联系 之 子传父 之 自定义事件

时间：2022-12-01 22:25:25

父传子是单向的，子会因父的改变而改变，但父并不会因子的改变而改变。这是由于Vue.js怕父的数据会被使用者在不知情的情况下改变。

但是，子还是可以绕一个圈，把自己的数据传给父。

途径：自定义事件。

在解释子数据传给父之前，必须先要对事件有一个了解。

所谓事件，就是触发JS代码的“动作”，比如，点击（click），
输入（input）等等。
Vue.js 使用v-on来监听事件，事件名被加在v-on 的后面，以这样的形式表示：v-on:click = "doFn" ，后面的doFn是事件触发的方法。

准备好了，开始传递数据吧。
首先，先定义一个组件：

//js
Vue.component('my-button',{
    template:'<button v-on:click="childCount">{{counter}},</button>'
    data:function(){ //组件的data只能是以函数的形式存在
return{
            counter:0
        }
    },
    methods:{
        childCount:function(){
this.counter = this.counter+1;
var value =  this.counter;
this.$emit('shijian',value); //value就是子要传的数据
        }
    }
})
var app4 = new Vue({
    el:'#app4',
    data:{
        total:0
    },
    methods:{
        faterCount:function(value){ //value就是父组件从子组件拿到的数据
this.total = this.total+value
        }
    }
})
//html
<div id="app4">
<p>{{total}}</p>
<my-button v-on:shijian="faterCount"></my-button>
</div>

这样，就完成了一次子数据传给父。

过程是这样的：
子组件<button> 被点击了，于是触发了click事件所指向的childCount方法。

该方法有两个行为，一个是自增，另一个使用了$emit创建一个自定义事件shijian 并且传了一个参数value，这个事件和参数可以被父组件拿到。

于是我们看到了v-on:shijian="faterCount" 这行代码，其中，faterCount 是Vue的实例app4的方法，他的作用是让一个变量自增。同时，自定义事件shijian 带有一个来自子组件的参数，这个参数可以传给app4的任意方法。

我们可以看到，点击了一次<my-button> (实际上是点击了他里面的子组件button), 自定义事件就会被父捕获，从而触发指向的父的方法。

根本思路是：子抛出了一个自定义事件，并传参，让父捕获，从而执行自己的带有来自子参数的方法。

好处是：子组件和父组件解耦了。子组件只需要抛出一个事件，然后完成自己的逻辑就好，无须关心父组件的行为。

当然，你也可以不使用自定义事件，转而使用原生的事件，比如这里是click 这也是没问题的，但是要添加相应的后缀native：

v-on:click.native="faterCount

但是，这样就如何传参我还在学习当中。
标签：

相关文章