Vue组件通信必备指南：父传子、子传父、兄弟之间自由聊

2023-08-29 16:04:13

Vue 组件通信：全面详解，助你玩转复杂业务场景

在 Vue.js 框架中，组件通信是构建复杂应用程序的关键。通过掌握各种通信方式，开发人员可以轻松应对不同的业务场景。本文将全面介绍 Vue 中的组件通信，让你成为组件通信达人。

父子通信：传递数据和事件

父子通信是最常见的组件通信方式，它允许父组件通过 props 将数据传递给子组件，而子组件通过 emit 事件将数据传递给父组件。

子传父：

<template>
  <ChildComponent :message="message" />
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

父传子：

<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click', '子组件发送的数据')
    }
  }
}
</script>

子父通信：依赖注入

子父通信与父子通信类似，只是通信方向相反。子组件通过 provide 提供数据，父组件通过 inject 接收数据。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">点我</button>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', '子组件发送的数据')
    }
  }
}
</script>

兄弟通信：同级组件交互

兄弟通信是指两个同级组件之间的通信。它们可以通过 $parent、$children 和 $refs 实现通信。

通过 $parent 实现兄弟通信：

<!-- 兄弟组件 A -->
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$parent.handleChildAClick('兄弟组件 A 发送的数据')
    }
  }
}
</script>

<!-- 兄弟组件 B -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleChildAClick(data) {
      this.message = data
    }
  }
}
</script>

祖孙通信：层级通信

祖孙通信是指祖孙组件之间的通信。它们可以通过 provide 和 inject 实现通信。

<!-- 祖组件 -->
<template>
  <ChildComponent>
    <template v-slot:default="{ message }">
      <GrandChildComponent :message="message" />
    </template>
  </ChildComponent>
</template>

<script>
export default {
  provide() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <GrandChildComponent />
</template>

<script>
export default {
  provide() {
    return {
      message: this.$parent.message
    }
  }
}
</script>

<!-- 孙组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  inject: ['message']
}
</script>

自由通信：事件总线

自由通信是指组件之间通过事件总线来实现通信。事件总线是一个全局对象，组件可以通过发布和订阅事件来实现通信。

<!-- 主组件 -->
<template>
  <ChildComponentA />
  <ChildComponentB />
</template>

<script>
export default {
  data() {
    return {
      eventBus: new Vue()
    }
  }
}
</script>

<!-- 子组件 A -->
<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$eventBus.$emit('childA-click', '子组件 A 发送的数据')
    }
  }
}
</script>

<!-- 子组件 B -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$eventBus.$on('childA-click', (data) => {
      this.message = data
    })
  }
}
</script>