javascript - 同级组件Vue JS中的触发方法

再次需要您的帮助。这是我的情况。 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使用该方法。
我知道如何将数据从一个孩子传递到另一个孩子，但是我无法理解如何仅从同级中操纵孩子的数据。
请帮忙！先感谢您！

最佳答案

如果我正确理解，您有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/[email protected]/dist/vue.js"></script>
<div id="app">
  <comp-a></comp-a>
  <comp-b></comp-b>
</div>

关于javascript - 同级组件Vue JS中的触发方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49564379/