javascript - 更改同级组件 Vue.JS 2.0 中组件数据的状态

Question

给定:

<parent-element>
    <sibling-a></sibling-a>
    <sibling-b></sibling-b>
</parent-element>

我怎样才能访问click siblingA 中按钮上的事件将 sibling-b 中的某些值更改为另一个值使用$emit(…) ？

Answer 1

@craig_h 是正确的，或者您可以使用 $refs，例如:

<parent-element>
    <sibling-a @onClickButton="changeCall"></sibling-a>
    <sibling-b ref="b"></sibling-b>
</parent-element>

在父方法中:

methods: {
    changeCall() {
      this.$refs.b.dataChange = 'changed';
    }
  }

在兄弟A中:

Vue.component('sibling-a', {
  template: `<div><button @click="clickMe">Click Me</button></div>`,
  methods: {
    clickMe() {
      this.$emit('onClickButton');
    }
  }
});

在兄弟B中:

Vue.component('sibling-b', {
  template: `<div>{{dataChange}}</div>`,
  data() {
    return {
      dataChange: 'no change'
    }
  }
});