vue使用v-on="$listeners"进行跨组件传递事件

53 阅读1分钟

1、父组件中

<template>
  <div>
    <p>父组件</p>
    <Son2
      :name="'哈哈'"
      :age="20"
      :bookList="['三国演义', '西游记']"
      :details="{'name': '张三', address: '广东深圳'}"
      :isActive="false"
      @change="change"
    ></Son2>
  </div>
</template>

<script>
  import Son2 from './Son2';
  export default {
    name: 'parent2',
    methods: {
      change() {
        console.log('我被点击了');
      },
    },
    components: {
      Son2,
    },
  };
</script>

<style scoped></style>

2、子组件中继续传递下去

<Grandson2 v-bind="$attrs" v-on="$listeners" />

3、在孙组件中调用

export default {
  mounted() {
    console.log(this);
    this.$listeners.change();
  },
};