Как отобразить данные вкладки из одноуровневого компонента

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 );