javascript - 关于v-if 后面的值传到其他组件中

Question

我在一个组件中，用v-if判断元素是否渲染

在这个组件中是可以的通过true,false来达到目的

但我想要在其他组件中可以同样控制这个getting来控制元素是否隐藏要怎么做？

并不是父子组件之间的通信

Answer 1

如图所示.

如果不用Vuex神器的话，如果组件比较多的情况下，还是蛮复杂的，如图所示，如果你的数据在组件D中，而你想在组件B中控制getting的值。

首先你要找到组件D跟组件B的共同祖先，也就是组件F，在组件F中通过props，把getting的值传递给组件A，然后组件A中再通过props传递给组件D，那么这时候如果是在组件A中或者组件F中修改getting的值，组件D中的值自然会自动变化。也就是说，想修改组件D中的getting值，只要修改祖先组件，也就是组件F中的getting值。

下面来看怎么在组件B中修改祖先，也就是组件F中的getting值，当在组件B中触发了一个事件，比如按钮儿点击事件以后，在相应函数中通过发送一个信号，给上一级的组件也就是组件F，
component B

methods: {
buttonClick: function() {
this.emit('event-name',false)
}
}

然后在组件F中监听这个事件，

<component-f> 
  <component-b @event-name='handleEvent'>
  </component-b>
</component-f>

在组件F中实现代码,

methods: {
event-name: function() {
this.getting = false;
}
}

这样，组件F中的getting值就被修改了，从而他的后代组件，组件D中的getting值也会随之变化，就达到了在其他组件中控制本组件中数据的目的。

Answer 2

Vue 2 去掉了 $dispatch 和 $broadcast，现在的做法是需要有一个 Vue 实例来充当通信媒介的作用，Vue 官方文档里将它叫做 event bus。

export default new Vue();

当我们需要组件之间事件通信的时候，只需要对这个 event bus 使用 $emit 和 $on 就可以了。

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <p>{{msg}}</p>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <p @click="sendEvent">Say Hi</p>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

这是vue2组件之间的通信方法，题主可以直接写bus.$emit事件把getting从另外的组件传到当前组件，就可以实现题主的需求了，这样的做法避免了使用vuex，是官方在构建中小型应用时比较推荐的做法。
具体的也可以上官方文档查看，跟我上面介绍差不多。

Answer 3

建议使用Vuex实现多个组件共享状态。
官网文档：http://vuex.vuejs.org/zh-cn/i...