Vue组件共享数据详解：新手指南

2023-12-04 13:57:45

Vue 组件共享数据的艺术

导言

在构建动态且可交互的 Web 应用程序时，组件间的通信至关重要。在 Vue.js 中，我们可以使用多种方法在组件之间高效地共享数据，从而创造更复杂且功能更强大的应用程序。本文将深入探讨 Vue.js 中共享数据的三种主要技术，即 $emit() 方法、事件总线和 ref 引用。

子组件到父组件的通信：$emit()

当需要从子组件向父组件传递数据时，$emit() 方法派上用场。它允许子组件触发一个自定义事件，并通过该事件将数据发送给父组件。父组件使用 @custom-event-name="methodName" 语法监听该事件，并在事件处理程序函数中接收传递的数据。

代码示例：

**子组件（ChildComponent.vue）** 

<template>
  <input v-model="message">
  <button @click="submit">提交</button>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    submit() {
      this.$emit('message-submitted', this.message)
    }
  }
}
</script>

**父组件（ParentComponent.vue）** 

<template>
  <child-component @message-submitted="onMessageSubmitted"></child-component>
</template>

<script>
export default {
  methods: {
    onMessageSubmitted(message) {
      console.log(`收到的消息：${message}`)
    }
  }
}
</script>

兄弟组件间的通信：事件总线

在兄弟组件之间共享数据时，事件总线是一种便利的方法。事件总线是一个全局对象，允许组件彼此通信，而不必直接关联。发送数据的组件使用 bus.emit() 方法触发事件，而接收数据的组件使用 bus.on() 方法监听事件。

代码示例：

**数据发送方组件（MessageSender.vue）** 

<template>
  <input v-model="message">
  <button @click="submit">提交</button>
</template>

<script>
import bus from '@/eventBus.js' // 全局事件总线模块

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    submit() {
      bus.$emit('message-submitted', this.message)
    }
  }
}
</script>

**数据接收方组件（MessageReceiver.vue）** 

<template>
  <p>收到的消息：{{ message }}</p>
</template>

<script>
import bus from '@/eventBus.js' // 全局事件总线模块

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

ref 引用：获取 DOM 元素或组件实例

ref 引用允许我们获取特定 DOM 元素或组件实例的引用。通过在模板中使用 ref 属性，我们可以将字符串值分配给 DOM 元素或组件实例。稍后，我们可以使用 $refs 对象访问该引用。

代码示例：

<template>
  <input ref="input">
  <button @click="submit">提交</button>
</template>

<script>
export default {
  methods: {
    submit() {
      console.log(this.$refs.input.value) // 获取输入字段的值
    }
  }
}
</script>