从兄弟姐妹组件vue.js 2.0更改组件数据状态

Question

给定：

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

如何使用siblingA中的按钮上的click事件访问CC_1上的事件，以使用sibling-b中的另一个值更改另一个值？

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';
    }
  }

在siblinga：

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

在siblingb中：

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

Answer 2

为此，您可以简单地使用全局总线并将您的事件发射到：

var bus = new Vue();
Vue.component('comp-a', {
  template: `<div><button @click="emitFoo">Click Me</button></div>`,
  methods: {
    emitFoo() {
      bus.$emit('foo');
    }
  }
});
Vue.component('comp-b', {
  template: `<div>{{msg}}</div>`,
  created() {
    bus.$on('foo', () => {
      this.msg = "Got Foo!";
    })
  },
  data() {
    return {
      msg: 'comp-b'
    }
  }
});

这是jsfiddle：https：//jsfiddle.net/6ekomf2c/

如果您需要做更复杂的事情，则应查看vuex