3分钟看懂VUE的$listeners属性

子组件可以通过$listeners获取父组件传递过来的所有事件处理函数

废话不多说，直接上代码

Parent组件样式

<template>
  <div>
    <h1>{
   {
    text }}</h1>
    <!-- 这里我们注册一个对象handle，并且绑定handleClick方法 -->
    <Father v-on:handle="handleClick" />
  </div>
</template>

<script>
import Father from "./Father";
export default {
   
  data() {
   
    return {
   
      text: "",
    };
  },
  components: {
   
    Father,
  },
  methods: {
   
    handleClick(callback) {
   
      console.log("parent call son"); //当子组件触发handleClick，输出"parent call son"
      this.text = callback(); //这里我们通过子组件传过来的回调并且给text赋值
    },
  },
};
</script>

Father组件样式

<template>
  <div>
    <!-- 通过 v-on="$listeners" 传入内部组件 -->
    <Son v-on="$listeners" />
  </div>
</template>

<script>
import Son from "./Son"