How to use v-on="$listeners" in Vue

$listeners

Used for low-level components to pass information to high-level components.

For example, there are three components: parent component A, child component B, and grandson component C. If C transmits information to B, you can use $emit directly. If C transmits information to A and uses $emit, then C needs to $emit to B first. B, B then $emit to A, this method is cumbersome, at this time you can use v-on="$listeners" to meet the current needs.

Example:

C component

<template>
  <div @click="onClick">C组件</div>
</template>

onClick(){
  this.$emit("Msg",'123')
}

B component

<template>
  <cCom v-on="$listeners"/>
</template>

A component

<template>
  <bCom @Msg='Msg'/>
</template>

methods:{
  Msg(val){
    console.log(val) //123
  }
}

Other related usages of component generation communication:

How to use v-bind="$attrs" in Vue https://blog.csdn.net/weixin_44594219/article/details/127257804?spm=1001.2014.3001.5502 How to use EventBus in vue2 https://blog.csdn. net/weixin_44594219/article/details/127248681?spm=1001.2014.3001.5502

Guess you like

Origin blog.csdn.net/weixin_44594219/article/details/127259825