0
工作后我有一个嵌套的组件和子组件应接收来自主实例的参数,但问题是,我有打电话给事件两次获得参数。Vue2事件总线第二个电话
的index.html
<div id="app">
<button @click="displayComponent">Display</button><br/><hr/>
{{ message }}
<mycomponent v-if="showComponent" @hide="hideComponents"></mycomponent>
</div>
code.js
window.bus = new Vue();
Vue.component('mycomponent', {
template: `
<div>
<h3>Im the parent component</h3>
<childcomponent></childcomponent>
<button @click="$emit('hide')">Hide components</button>
</div>
`
});
Vue.component('childcomponent', {
template:`
<div>
<h4>Im the child component</h4>
<p>{{ data }}</p>
</div>
`,
data() {
return {
text: 'Nothing loaded'
};
},
methods: {
test() {
alert('hello');
},
getData(x) {
this.text = x;
}
},
created(){
bus.$on('extraCall', data => {
this.getData(data);
this.test();
});
}
});
const app = new Vue({
el: '#app',
data: {
message: 'hello world!',
showComponent: false
},
methods: {
displayComponent() {
bus.$emit('extraCall', 'this is some extra text');
this.showComponent = true;
},
hideComponents() {
this.showComponent=false;
}
}
});
子组件元件内的文本值被设置为默认值,显示按钮被点击后它触发bus.$emit
与extraCall
事件与一些文本作为参数,这应该更新文本值,并且它只发生在第二次点击显示按钮后。
我缺少什么?
好的,这确实有用,但是正如你所说的不是最佳的,必须有更好的解决方案。但是,由于它解决了我作为解决方案进行投票的主要问题,如果我发现更好的方法将在此处发布。非常感谢! – deadPoet
好吧,既然你真的很好,合作,我会问你这个问题,前一段时间我做了这样的工作,但它现在没有,我发现的唯一区别就是在html文件中,条件显示的组件,而不是V - 如果是V - 显示,当我改变它,只是工作...会使用这个任何抵押品损坏?... AFAIK V-SHOW需要更多的加载,但只是显示正确而v-if在每次调用时都会创建该组件。 – deadPoet
'v-show'只切换元素上的样式。如果'v-show'为false,那么该组件仍然被创建,它因为样式而被隐藏(你可以在开发工具中看到它)。 'v-if'实际上会破坏/创建元素。如果您在此处使用'v-show'而不是'v-if',它将与您的原始代码一起工作。要决定'v-if'和'v-show',你需要考虑(1)你需要始终创建的元素吗? (2)会让隐藏在DOM中的元素影响任何':nth-child' CSS选择器? (3)用'v-show'保持元素的活性将使用更多的内存等。 –