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

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组件.您需要使用rootinstance属性与根实例中的组件进行通信.所以基本上为事件添加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

为了将来参考，自定义事件名称不能是驼峰式的。使用this.$emit('send_event', 'bye')而不是this.$emit('sendEvent', 'bye') https://github.com/vuejs/vue/issues/4044