vue抽象组件拦截事件

Question

<is-abstract>
      <is-show />
    </is-abstract>

export default {
  abstract: true,
  name: "is-abstract",
  render() {
    const slot = this.$slots.default;
    const vNode = slot[0];
    const componentOptions = vNode && vNode.componentOptions;
    const componentInstance = vNode && vNode.componentInstance;
    return vNode;
  },
};

<template>
  <div class="">
    <el-button @click="clickAction">click</el-button>
  </div>
</template>

<script>
export default {
  components: {},
  name: 'is-show ',
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    clickAction() {
      this.$emit("upload", "upload");
    },
  },
  created() {},
  mounted() {},
};
</script>

如何在抽象函数中拦截@upload事件

Answer 1

你是指这样？

// is-abstract
mounted() {
        this.$slots.default[0].componentInstance.$on('upload', arg => console.log('拦截',arg))
  },