Question

再次需要你的帮助。这是我的情况。 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中的该方法。我知道如何将数据从孩子传递到孩子，但无法理解如何能够从其兄弟中操纵孩子的数据。请帮忙！提前谢谢！

Answer 1

如果我理解正确，你有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>

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

1 个答案: