Question

我有这段代码：

HTML

<div id="app">
  {{text}}
  <my-component></my-component>
</div>

JS

Vue.component('my-component', {
  template: '<button @click="click">Click me</button>',
  methods: {
    click() {
        this.$emit('send', 'bye')
    }
  }
})

new Vue({
  el: "#app",
  data: {
    text: "hello"
  },
  created() {
    this.$on('send', (text) => {
        this.text = text;
    })
  }
})

工作示例：https://jsfiddle.net/rjurado/y4yf6nve/

为什么事件send不起作用？

Answer 1

父组件可以使用v-on直接侦听从子组件发出的事件。

<强> HTML

<div id="app">
  {{text}}
  <my-component v-on:send="sendText"></my-component>
</div>

<强> JS

Vue.component('my-component', {
  template: '<button @click="click">Click me</button>',
  methods: {
    click() {
      this.$emit('send', 'bye')
    }
  }
})

new Vue({
  el: "#app",
  data: {
    text: "hello"
  },
  methods: {
    sendText(text) {
      alert(text)
    }
  }
})

工作示例：https://jsfiddle.net/y4yf6nve/2/

Answer 2

this.$emit仅指Vue组件。您需要使用root instance属性与根实例中的组件进行通信。所以基本上为事件添加root：

this.$root.$emit('send', 'bye')

this.$root.$on('send', (text) => {
      this.text = text;
  })

工作示例：jsFiddle

Vue.js中央事件总线

更好的方法是使用中央事件总线：docs

var bus = new Vue();

Vue.component('my-component', {
  template: '<button @click="click">Click me</button>',
  methods: {
    click() {
        bus.$emit('send', 'bye')
    }
  }
})

new Vue({
  el: "#app",
  data: {
    text: "hello"
  },
  created() {
    bus.$on('send', (text) => {
        this.text = text;
    })
  }
})

工作示例：jsFiddle

Answer 3

对于将来的引用，自定义事件名称不能是camelCased。使用this.$emit('send_event', 'bye')代替this.$emit('sendEvent', 'bye') https://github.com/vuejs/vue/issues/4044

Vuejs 2：将事件从组件发送到父组件

3 个答案:

Vue.js中央事件总线