问题描述
我的Vue应用程序使用:
I have my vue application using:
由component-child组成的parent-parent组件
component-parent component that is made of component-child
在component-parent内部，我有一些按钮，当有人单击某个按钮时，我想发出一个事件，以便由vue处理并传递给另一个组件
inside component-parent I have buttons, when someone click a button I want to emit an event in order to be handled by vue and passed to another component
我到目前为止所做的:
var vm = new Vue({
el: '#app',
methods: {
itemSelectedListener: function(item){
console.log('itemSelectedListener', item);
}
}
});
Vue.component('component-child', {
template: ' <span v-on:click="chooseItem(pty )" >Button </span>',
methods: {
chooseItem: function(pty){
console.log(pty);
this.$emit('itemSelected', {
'priority' : pty
});
}
}
});
Vue.component('component-parent', {
template: '<component-child v-for="q in items" ></component-child>'
});
HTML:
<component-parent v-on:itemSelected="itemSelectedListener" ></component-parent>
到达我的 console.log(pty); 行，但是 this.$ emit('itemSelected'似乎无法通过:
It reaches my console.log(pty); line but it seems that this.$emit('itemSelected' wont get through:
console.log('itemSelectedListener', item); // this is not going to be called...
一个提示?
我应该从child-> parent-> Vue-instance冒起事件吗?(我也尝试过，但没有成功)
should I bubble up the event from child->parent->Vue-instance? ( I also tried that but with no success)
推荐答案
component-parent 模板存在一个问题，因为它试图呈现多个子组件.Vue通常在组件内部仅需要一个root div，因此您需要将其包装在div或其他标签中.
There is one issue with your component-parent template as it tries to render multiple child components. Vue usually requires a single root div inside components therefore you need to wrap it in a div or other tag.
<div>
<component-child v-for="q in items"></component-child>
</div>
要指出的第二件事是，您从一个2级以下的子组件中发出一个事件，然后您在根目录中侦听该事件.
A second thing to point out is that you emit an event from a child component which is 2 levels down and you listen to it in the root.
Root //but you listen to the event up here 1 level above
Component 1 //you should listen to the event here
Component 2 //your try to emit it from here
您在这里有2个选项.从 component-child 发出的声音在 component-parent 中侦听该事件，然后向上传播该事件.小提琴 https://jsfiddle.net/bjqwh74t/29/
You have 2 options here. Either emit from component-child listen to that event in component-parent then propagate that event upwards. Fiddle https://jsfiddle.net/bjqwh74t/29/
第二种选择是注册一个全局的所谓的 bus ，它是一个空的vue实例，当您希望非子级组件之间进行通信时，可以在这种情况下使用它.小提琴 https://jsfiddle.net/bjqwh74t/30/
The second option would be to register a global so called bus which is an empty vue instance that you can use for such cases when you want communication between non child-parent components. Fiddle https://jsfiddle.net/bjqwh74t/30/
通常，在父组件和子组件之间，您可以直接通过从子对象发出事件并使用 v-on:event-name ="handler" 侦听父对象来使用事件，但是对于级别更高的情况在组件之间使用第二种方法.
Usually between parent and child components you use the events directly by emitting from child and listening in parent with v-on:event-name="handler" but for cases where you have more levels between components you use the second approach.
第一种情况的文档链接:https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
Doc link for the first case: https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events
第二种情况的文档链接: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
Doc link for the second case: https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
PS:对于事件名称，更喜欢使用kebab-case，这意味着您使用-而不是大写字母书写.用大写字母书写会导致奇怪的情况，即您的事件没有被发现.
PS: prefer using kebab-case for event names which means you write with - instead of capital letters. Writing with capital letters can result in weird situations where your event is not caught in the root.
这篇关于如何使用Vue js 2在组件子组件链上冒泡事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！