第二十节:Vue组件传参:Vue子组件向父组件传参(事件传参)

1. 自定义事件

除了可以处理原生的DOM事件, v-on指令也可以处理组件内部触发的自定义的事件,调用this.$emit()函数就可以触发一个自定义事件

$emit()触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用v-on来绑定这个自定义事件

{
    methods: {
        handleClick(){
            this.clicks++
            this.$emit("count",this.clicks )
        }
    }
}

所以我们就可以利用自定事件来处理子组件触发父组件数据的更改和向父组件传值

2. 子组件触发父组件数据的改变

通过父组件向子组件传值的学习,我们已经知道了Vue是单向下行数据流, 子组件更改props中的数据不会触发父组件数据的改变, 但是由于响应式原理,父组件数据的改变会导致子组件props中值的改变

那么我们怎样才能在子组件中改变显示的结果呢.

思路:

1. 子组件中没发更改父组件中的数据,那么我们就让父组件自己的函数改自己的数据
2. 如何在子组件中触发父组件中的函数呢, 就可以通过自定义事件
3. 子组件在函数中触发自定义事件, 将父组件中更改数据的函数绑定为自定义事件的函数
4. 然后父组件中的数据一变,因为响应式,所以子组件中的数据会自动改变

示例代码如下:

示例结果

子组件通过自定义事件改变父组件数据.png

最后父组件数据一变,子组件显示结果自然变化

我们也知道$emit方法在触发自定义事件的时候,还可以给自定义事件传参, 这样就可以实现子组件像父组件传参

3. 子组件向父组件传参

上一小节,我们是在子组件中通过自定义事件触发父组件中的函数, 在父组件中修改数据,

同样我们也可以在子组件中修改数据,然后将修改后的数据通过自定义事件传参的方式,传递给父组件函数,在父组件函数中直接用子组件传过来修改后的数据直接替换父组件中的数据

示例代码如下: