再次需要你的帮助。这是我的情况。 VueJS2(vue-cli项目)没有Vuex。
我有parent
个组件,child1
和child2
。
child1
是一个从child2
(表格)中获取数据的表单。点击child2
中的表格行复选框后,我们会在child1
中填写表单,这是event
通过parent
发出的(图片2)。
child1
有一个按钮,reset method
(见图1)可以清除其字段。我的任务是:当我在表格行child2
中取消选中'复选框时,必须清除child1
中的表单。我如何执行此操作,具体而言,如何从reset method
访问child1
中的child2
并基本上使用child2
中的该方法。
我知道如何将数据从孩子传递到孩子,但无法理解如何能够从其兄弟中操纵孩子的数据。
请帮忙!提前谢谢!
答案 0 :(得分:2)
如果我理解正确,你有2个子组件,并且你想告诉child1从你的child2组件执行一个方法(重置)而不传递任何道具。
那么,在这种情况下,您的选择仅限于使用事件总线。
检查此示例。当您单击CompB
中的按钮时,它会在另一个子组件中执行一个方法:CompA
var Bus = new Vue()
var compA = {
data: () => ({ name: 'Primary' }),
template: `<p> Comp A is: {{name}}</p>`,
methods: {
reset () {
this.name = 'RESETED'
}
},
created () {
let self = this;
Bus.$on('resetA', function (payload) {
self.reset()
})
}
}
var compB = {
template: `<p> Comp B <button @click="resetCompA"> Clear A </button> </p>`,
methods: {
resetCompA () {
Bus.$emit('resetA')
}
}
}
new Vue({
el: '#app',
components: {
'comp-a' : compA,
'comp-b' : compB
}
})
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
<comp-a></comp-a>
<comp-b></comp-b>
</div>