Vue 调用父子组件事件

一、父组件中调用子组件事件

父组件中引入子组件

<user-edit
  ref="userEdit"
  @close="handleUserEditClose"
  @success="handleUserEditSuccess"
  :userEditVisiable="userEdit.visiable"
/>

父组件如何调用子组件中的方法呢?

edit (record) {
  this.$refs.userEdit.setFormValues(record) // 调用子组件的方法
  this.$refs.userEdit.roleData // 获取子组件的属性
},

子组件中，定义 setFormValues 方法，代码如下：

setFormValues ({...user}) {
  console.log(user)
},

更多详情，请查看：Vue 官网之访问子组件实例或子元素

进阶版：

使用实例方法/事件 $on 和 $emit API 进行操作。

vm.$on(event, callback)：监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit(eventName, [...args])：触发当前实例上的事件。附加参数都会传给监听器回调。

edit (record) {
  this.$refs.userEdit.$emit('setFormValues', record) // 触发监听事件
},

子组件中如何监听呢？

monitoring() { // 监听事件
  this.$on('childMethod', (res) => {
    console.log(res)
  })
},

更多详情，请查看 Vue API。

 二、子组件中如何调用父组件的事件

首先子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件后做处理即可。

onClose () {
  this.$emit('close')
},

父组件监听事件，并且做出逻辑处理。

<user-edit
  ref="userEdit"
  @close="handleUserEditClose"
  :userEditVisiable="userEdit.visiable"
/>

handleUserEditClose () {
  this.userEdit.visiable = false
},

进阶版：将父组件的方法传入子组件中，在子组件中直接调用这个方法，即方法作为参数传入子组件中使用。

<user-edit
  ref="userEdit"
  :userEditVisiableClose="handleUserEditClose"
/>

handleUserEditClose () {
  this.userEdit.visiable = false
},

子组件中如何调用呢？

props: {
  userEditVisiableClose: {
    type: Function,
    default: null
  }
},

childMethod() { // 点击事件
  if (this.userEditVisiableClose) {
    this.userEditVisiableClose();
  }
}

官方提供一个直接调用父组件的方法：this.$parent.event。

直接在子组件中，使用 this.$parent.event，其中 event 就是父组件中的事件。

Vue 中 $parent 的含义

$parent 指向调用该组件的（父组件）实例，通过 this.$parent 可以访问到父组件上所有的 props、data 里面的数据信息和生命周期方法以及 methods 方法。同时我们可以通过 $parent 层叠可以一层一层地往上追溯各级父组件，比如 this.$parent.$parent.event。

更多详情，请查看 Vue 官网之访问父级组件实例。