本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue 3 中的组间传值

在 Vue 3 中，组件之间的通信可以通过传递数据或使用自定义事件进行。

下面是在组件之间传递数据的几种方法，包括代码示例：

在组件之间使用 prop 传递数据。prop 是单向数据流的一部分，可以将父组件的数据流向子组件。

例如，在父组件中，你可以定义一个 prop 并将它传递给子组件：

<template>
  <ChildComponent v-bind:message="parentMessage"/>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  }
}
</script>

在子组件中，你可以使用 prop 来访问父组件传递的数据：

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

使用 Vuex，这是一个专门用于管理应用程序状态的状态管理模式。通过使用 Vuex，组件可以访问应用程序的共享状态。

例如，你可以定义一个 Vuex store 并在组件中访问它：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex store'
  }
})

Copy code
// MyComponent.vue
<template>
  <p>{{ message }}</p>

使用 provide/inject，这是 Vue 3 中的一种新的方法，用于在父子组件之间传递数据。

例如，你可以在父组件中使用 provide 将数据提供给子组件：

Copy code
<template>
  <ChildComponent v-bind:message="parentMessage"/>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent component'
    }
  },
  provide() {
    return {
      message: this.parentMessage
    }
  }
}
</script>

在子组件中，你可以使用 inject 来访问父组件提供的数据：

Copy code
<template>
  <p>{{ message }}</p>
</template>

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

除了使用数据传递，还可以使用自定义事件来在组件之间进行通信。这是通过在子组件中触发事件，并在父组件中监听事件实现的。

例如，你可以在子组件中触发一个自定义事件：

Copy code
<template>
  <button v-on:click="sendMessage">Send message to parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child component')
    }
  }
}
</script>

在父组件中，你可以监听子组件触发的自定义事件：

<template>
  <ChildComponent v-on:custom-event="receiveMessage"/>
</template>

<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message) // 'Hello from child component'
    }
  }
}
</script>

使用自定义事件的好处是，它可以让你在组件之间传递任意类型的数据，并且可以让组件之间的通信变得更加灵活。

总的来说，Vue 3 中有许多方法可以用于在组件之间传递数据和进行通信。你可以根据项目的需要选择适当的方法，以使组件之间的通信更加高效

本文已参与「新人创作礼」活动，一起开启掘金创作之路。-Vue 3 中的组间传值

本文已参与「新人创作礼」活动，一起开启掘金创作之路。