vue2.0 兄弟组件(平级)通讯的实现代码

Vue 2.0 兄弟组件(平级)通讯的实现代码攻略

在 Vue 2.0 中，兄弟组件之间的通讯可以通过共享一个父组件的数据来实现。下面是实现兄弟组件通讯的完整攻略，包含两个示例说明。

步骤一：创建父组件

首先，我们需要创建一个父组件，用于承载兄弟组件并提供数据通讯的功能。在父组件中，我们可以定义一个数据属性，然后将它传递给两个兄弟组件。

<template>
  <div>
    <child-component-a :shared-data=\"sharedData\"></child-component-a>
    <child-component-b :shared-data=\"sharedData\"></child-component-b>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue'
import ChildComponentB from './ChildComponentB.vue'

export default {
  components: {
    ChildComponentA,
    ChildComponentB
  },
  data() {
    return {
      sharedData: ''
    }
  }
}
</script>

步骤二：创建兄弟组件

接下来，我们需要创建两个兄弟组件，分别是 ChildComponentA 和 ChildComponentB。这两个组件将接收父组件传递的共享数据，并可以通过修改该数据来实现通讯。

示例一：通过 props 接收共享数据

在 ChildComponentA 和 ChildComponentB 中，我们可以通过 props 接收父组件传递的共享数据，并在模板中使用它。

<template>
  <div>
    <p>我是兄弟组件A，接收到的共享数据为：{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  props: ['sharedData']
}
</script>

<template>
  <div>
    <p>我是兄弟组件B，接收到的共享数据为：{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  props: ['sharedData']
}
</script>

示例二：通过事件修改共享数据

除了接收共享数据，兄弟组件还可以通过触发事件来修改共享数据，从而实现双向通讯。

在 ChildComponentA 中，我们可以通过 $emit 方法触发一个自定义事件，并传递新的数据。

<template>
  <div>
    <input type=\"text\" v-model=\"inputData\" @input=\"updateSharedData\">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputData: ''
    }
  },
  methods: {
    updateSharedData() {
      this.$emit('update-shared-data', this.inputData)
    }
  }
}
</script>

在 ChildComponentB 中，我们可以通过监听自定义事件来更新共享数据。

<template>
  <div>
    <button @click=\"updateSharedData\">更新共享数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateSharedData() {
      this.$emit('update-shared-data', '新的共享数据')
    }
  }
}
</script>

步骤三：实现兄弟组件通讯

最后，我们需要在父组件中监听兄弟组件的事件，并更新共享数据。

<template>
  <div>
    <child-component-a :shared-data=\"sharedData\" @update-shared-data=\"updateSharedData\"></child-component-a>
    <child-component-b :shared-data=\"sharedData\" @update-shared-data=\"updateSharedData\"></child-component-b>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue'
import ChildComponentB from './ChildComponentB.vue'

export default {
  components: {
    ChildComponentA,
    ChildComponentB
  },
  data() {
    return {
      sharedData: ''
    }
  },
  methods: {
    updateSharedData(newData) {
      this.sharedData = newData
    }
  }
}
</script>

现在，当兄弟组件 A 中的输入框发生变化时，会触发 update-shared-data 事件，并将新的数据传递给父组件。父组件会更新共享数据，并将新的数据传递给兄弟组件 B，从而实现了兄弟组件之间的通讯。

当兄弟组件 B 中的按钮被点击时，会触发 update-shared-data 事件，并将新的数据传递给父组件。父组件同样会更新共享数据，并将新的数据传递给兄弟组件 A。

这样，兄弟组件之间的通讯就完成了。你可以根据实际需求，修改示例代码来适应你的应用场景。