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

Question

再次需要您的帮助。这是我的情况。 VueJS2(vue-cli 项目)没有 Vuex。我有parent组件，child1和 child2 . child1是一个从 child2 获取数据的表单(这是一张 table )。单击 child2 中表格行的复选框后，我们在child1填写表格这是由 event 完成的通过 parent 发射(图 2)。 child1有一个按钮和reset method (见图 1)清除其字段。我的任务是:当我在表行 child2 中“取消选中”复选框时, 在 child1 中形成必须清除。我该怎么做，具体来说，我如何访问 reset method在child1来自 child2并使用 child2 中的方法基本上。我知道如何将数据从一个 child 传递到另一个 child ，但无法理解如何能够从其 sibling 那里操纵 child 的数据。请帮忙!提前致谢!

Answer 1

如果我理解正确的话，你有 2 个子组件，你想告诉 child1 从你的 child2 组件执行一个方法(重置)而不传递任何 Prop 。

那么，在那种情况下，您的选择仅限于使用事件总线。

检查这个例子。当您单击 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>