vue.js - 如何显示来自同级组件的选项卡数据

Question

我是 vuejs 的新手，我想显示来自兄弟组件的选项卡数据，下面是我的代码。请帮忙！！

我可以切换选项卡但无法显示来自同级组件的数据

`

<template>
  <div>
    <section>
      <div>logo</div>
      <tabs></tabs>
      <div>right menu</div>
    </section>
    <tabs-data></tabs-data>
  </div>
</template>

<script>
export default {
  components: {
    'tabs': {
      template: '<div><a href="#" v-on:click="checkClass()" v-bind:class="{ active: ist1 }">tab1</a><a href="#" v-on:click="checkClass()" v-bind:class="{ active: ist2 }">tab2</a></div>',
      data () {
        return {
          ist1: true,
          ist2: false
        }
      },
      methods: {
        checkClass: function () {
          this.ist1 = !this.ist1
          this.ist2 = !this.ist2
        }
      }
    },
    'tabs-data': {
      template: '<section><p v-if="ist1">Tab Data 1</p><p v-else>Tab Data 2</p></section>'
    }
  }
}
</script>

`

Answer 1

您可以在父事件中添加“桥梁”。不知道是不是好办法

events : {
    'bridge'( e, ...args ) {
        // $broadcast would not trigger the events in parent, add $emit if you want parent itself can also detect the event.
        this.$emit( e, ...args );
        this.$broadcast( e, ...args ); 
   }
}

并使用桥在组件中调度事件

this.$dispatch( 'bridge', 'real-event-name', params );