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

如何显示兄弟组件的选项卡数据

1 个答案: