巧妙构建组件通信，Vue中的数据传递技巧

前端

2023-10-19 21:43:19

Vue组件通信：共享数据和事件的基础

前言

Vue组件通信是构建复杂Vue应用程序的关键所在。它允许组件之间共享数据和事件，从而实现功能强大且可维护的架构。在本文中，我们将深入探讨Vue中父子组件通信和兄弟组件通信的两种主要方式，并提供详细的示例代码和说明。

父子组件通信

Props：传递数据

父子组件通信中最常见的方式是使用props。Props允许父组件将数据传递给子组件，后者可以使用props接收该数据。Props是一个对象，包含父组件要传递的数据键值对。

代码示例：

// 父组件
<template>
  <child :message="msg"></child>
</template>

<script>
export default {
  data() {
    return {
      msg: "this is parent message"
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

$emit：发出事件

另一种父子组件通信的方式是使用emit。它允许子组件向父组件发出事件。子组件使用emit方法发出事件，父组件使用v-on指令监听子组件发出的事件。

代码示例：

// 子组件
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child @click="handleClick"></child>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('子组件发出的事件被父组件捕获')
    }
  }
}
</script>

兄弟组件通信

事件总线：全局通信

兄弟组件通信是指两个没有父子关系的组件之间的通信。一种实现方式是使用事件总线。事件总线是一个全局对象，允许组件之间发送和接收事件。

代码示例：

// 创建事件总线
const eventBus = new Vue()

// 组件A
<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      eventBus.$emit('click')
    }
  }
}
</script>

// 组件B
<template>
  <div>
    <p v-if="show">兄弟组件A发送的事件被捕获</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  mounted() {
    eventBus.$on('click', () => {
      this.show = true
    })
  }
}
</script>

provide/inject：共享数据和方法

另一种兄弟组件通信的方式是使用provide/inject。它允许组件向其子组件和兄弟组件提供数据和方法。

代码示例：

// 父组件
<template>
  <div>
    <child></child>
  </div>
</template>

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

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  mounted() {
    console.log(this.message) // "this is parent message"
  }
}
</script>