vue跨兄弟组件通信，实现点击按钮对场景的切换

在Vue中，跨兄弟组件通信可以通过父组件作为中介来实现。在父组件中定义一个数据，然后将该数据作为props分别传递给两个兄弟组件。当其中一个兄弟组件需要改变该数据时，可以通过$emit方法触发父组件的事件，从而改变该数据。另一个兄弟组件通过监听该数据的变化实现对场景的切换。

下面是一个简单的实现：

父组件：

<template>
  <div>
    <child1 :active="active" @changeActive="changeActive"></child1>
    <child2 :active="active"></child2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: false
      }
    },
    methods: {
      changeActive() {
        this.active = !this.active
      }
    }
  }
</script>

子组件1：

<template>
  <button @click="changeActive">{{ active ? '关闭' : '打开' }}</button>
</template>

<script>
  export default {
    props: {
      active: Boolean
    },
    methods: {
      changeActive() {
        this.$emit('changeActive')
      }
    }
  }
</script>

子组件2：

<template>
  <div v-if="active">场景1</div>
  <div v-else>场景2</div>
</template>

<script>
  export default {
    props: {
      active: Boolean
    }
  }
</script>