Question

假设：

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

如何使用$ emit在siblingA中的按钮上访问click事件以将某些值更改为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';
    }
  }

在兄弟姐妹中：

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

在兄弟姐妹中：

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

从兄弟组件Vue.JS 2.0更改组件数据的状态

2 个答案: