兄弟组件Vue JS中的触发方法

时间:2018-03-29 20:19:50

标签: javascript vue.js vuejs2 vue-component

再次需要你的帮助。这是我的情况。 VueJS2(vue-cli项目)没有Vuex。 我有parent个组件,child1child2child1是一个从child2(表格)中获取数据的表单。点击child2中的表格行复选框后,我们会在child1中填写表单,这是event通过parent发出的(图片2)。 child1有一个按钮,reset method(见图1)可以清除其字段。我的任务是:当我在表格行child2中取消选中'复选框时,必须清除child1中的表单。我如何执行此操作,具体而言,如何从reset method访问child1中的child2并基本上使用child2中的该方法。 我知道如何将数据从孩子传递到孩子,但无法理解如何能够从其兄弟中操纵孩子的数据。 请帮忙!提前谢谢!

Snippet of reset method in child1 enter image description here

1 个答案:

答案 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>