Vue中父子组件通信与事件触发的深入讲解 Vue中父子组件通信与事件触发

一、组件

子组件
父组件

二、父子组件通信

父组件给子组件通信
子组件向父组件通信

三、父子组件事件触发

父组件调用子组件中的事件方法
子组件调用父组件中的事件方法

四、总结

一、组件
子组件

【Vue中父子组件通信与事件触发的深入讲解】
父组件

效果展示：

文章图片

通过这张图可以看出父子组件的结构，下面我们来实习父子组件通信。

二、父子组件通信
父组件给子组件通信
实现思路：子组件通过 props 来接受父组件传过来的值。

在父组件中，定义一个data变量，在子组件标签中动态绑定这个值。

// Father.vue
接着在子组件里通过 props 来接收，这样子组件就接收到了父组件传递过来的值了。

// Child.vue

文章图片

可以看到，我们父组件向子组件通信已经实现了，接下来就是子组件向父组件通信了，这个就要使用到 this.$emit 方法了。

子组件向父组件通信
实现思路：通过在子组件中使用 this.$emit 来触发自定义事件并传值，然后在父组件中监听该事件即可。

在子组件中给 button 按钮添加 click 事件，来通过 this.$emit 自定义事件，并传入一个参数：
在父组件中的子组件标签里，先在 data 里定义一个变量接收这个值，然后监听在子组件中自定义的事件，并接受这个参数赋值给定义的变量：

点击子组件中的“子组件将值传递给父组件”，就可看到如下效果：

文章图片

三、父子组件事件触发
父组件调用子组件中的事件方法

通过 ref 直接调用子组件的方法：

// Child.vue

在子组件标签上添加 ref 属性，然后在方法中通过 this.$refs 找到绑定 ref 的属性调用该子组件内的方法即可。

// Father.vue
通过组件的 $emit、$on 方法：

// Child.vue

在子组件中使用 $on 绑定一个方法，然后在父组件中通过 $emit 找到绑定 $on 上面的事件名即可，但是也需要 ref 的配合。

// Father.vue

两种实现方式效果一致。
调用方法前：

文章图片

调用方法后：

文章图片

文章图片

子组件调用父组件中的事件方法

直接在子组件中通过 this.$parent 来调用父组件的方法

// Father.vue

// Child.vue
在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件（推荐使用）

// Father.vue

子组件可以使用 $emit 触发父组件的自定义事件。

// Child.vue
父组件把方法传入子组件中，在子组件里直接调用这个方法：

// Father.vue

父组件可以将事件绑定到子组件标签上，子组件使用 props 接收父组件的事件。

// Child.vue

以上三种实现方式效果一致。
调用方法前：

文章图片

调用方法后：

文章图片

四、总结至此，Vue 父子组件之间大部分的操作都涉及到了，我们在程序的开发过程中对于该部分内容可以游刃有余了。
到此这篇关于Vue中父子组件通信与事件触发的文章就介绍到这了,更多相关Vue父子组件通信与事件触发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！