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
  }
}