vuejs组件事件：不工作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs组件事件：不工作相关的知识，希望对你有一定的参考价值。
我有一个vuejs组件，在我的组件的一个方法中，我正在调度这样的事件：
this.$emit('user:registerd', [user])
在父母身上我尝试使用它来捕获它
<user v-on:user:registered="showSuccess"> </user>
但以上从未运行showSuccess方法。如果我从发射和v-on中省略:部分，一切正常。我认为有可能使用:以某种方式在组件中使用它。
有谁知道为什么这不起作用？
答案
如果你发出：
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])
请记住，您正在将一个元素数组发送到处理函数中。
小演示：
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组件事件：不工作的主要内容，如果未能解决你的问题，请参考以下文章