vuejs 组件事件：不工作

Question

我有一个 vuejs 组件，在我的组件的一个方法中，我正在调度这样一个事件：

this.$emit('user:registerd', [user])

在父级上，我尝试使用

捕获它

<user v-on:user:registered="showSuccess"> </user>

但上面从未运行 showSuccess 方法。如果我从 emit 和 v-on 中省略 : 部分，一切正常。我认为可以使用 : 以某种方式在组件中使用它。

有谁知道为什么这不起作用？

Answer 1

如果你发出：

this.$emit('user:registerd', [user])

收听：

<user v-on:user:registerd="showSuccess"> </user>

OTOH，如果你想听：

<user v-on:user:registered="showSuccess"> </user>

你应该像这样发出：

this.$emit('user:registered', [user])

请记住，您正在向处理程序函数发送一个 one-element 数组。

小演示：

Vue.component('child', {
  template: `<button @click="$emit('user:registered', [123])">CLICK ME TO EMIT EVENT</button>`
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
   showSuccess(e) {
      this.message = 'Success. Received: ' + JSON.stringify(e);
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <child @user:registered="showSuccess"></child>
</div>

vuejs 组件事件：不工作

vuejs component event with : not working

javascript

vue.js

vue-component

vuejs2

vue-events