Question

我无法从根Vue实例的子组件接收任何事件。

我有一个简单的子组件，在单击或安装时会发出“ hello”事件：

<template>
  <div v-on:click="clicked"></div>
</template>

<script>
export default {
  name: 'ChildComponent',
  mounted() {
    this.$emit('hello');
  },
  methods: {
    clicked() {
      this.$emit('hello');
    }
  }
};
</script>

在我的Vue根实例中，我尝试了一切以接收事件，但是似乎没有任何处理程序正在接收该事件。我不确定自己在做什么错。

const comp = () => import('./components/SomeVueWhichHasChild.vue');

const v = new Vue({
  store,
  render: h => h(comp, {
    on: {
      hello: () => {
        console.log('VUE INSTANCE HELLO');
      }
    },
    nativeOn: {
      hello: () => {
        console.log('NATIVE HELLO');
      }
    }
  }),
});
v.$on('hello', () => {
  console.log('ON HELLO');
});

v.$mount('#app');

Answer 1

似乎是这样的重复：

How to bubble events on a component subcomponent chain with Vue js 2?

只有组件的直接父级可以侦听事件。我改用本机JS事件：

this.$el.dispatchEvent(new CustomEvent('hello', {
  detail: { ... },
  bubbles: true,
  composed: true
}));

Answer 2

正如@Decade Moon所说，您的div应该具有一些内容，以便可以单击。例如：

<div v-on:click="clicked">Test content</div>

您可以在Codepen上查看我的演示

Root Vue实例未接收事件

2 个答案: