Vue 父组件传递事件给子组件

父组件传递自定义事件给子组件,子组件显示调用的两种方式

1.父组件使用 v-bind(:属性传递)

• 父组件

<child
  :mockParent="handleParentEvet"
></child>

• 子组件需接收props

props:{
  mockParent:{
    type: Function
  }
},
methods:{
  handle(){
    this.mockParent(‘param from child‘)
    // 不能使用 this.$emit(‘mockParent‘,‘sssss‘)
  }
}

2.父组件使用 v-on(@传递),子组件调用时使用边界情况

• 父组件

<child
  @test="parentTest"
  @update="parentUpdate"
></child>

• 子组件中无需接收props

methods:{
  handle(){
    this.$listeners.test(‘param from child test‘) // OK
    this.$listeners.update(‘param from child update‘) // OK
    this.$emit(‘update‘,‘param from child update‘) // OK
  }
}

Vue 父组件传递事件给子组件

原文：https://www.cnblogs.com/leslie1943/p/13625953.html