046Vue3的官方推荐的三个组件传值解决方案：props、pinia(状态管理)、provide和inject

在Vue 3中，传递数据常用的方法有props、provide/inject、以及状态管理库如Pinia。以下是这三种方法的简单示例：

1. 使用props传递数据：

父组件：

<template>
  <ChildComponent :message="parentMessage" />
</template>
 
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
const parentMessage = ref('Hello from parent')
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>
 
<script setup>
import { defineProps } from 'vue'
 
const props = defineProps({
  message: String
})
</script>

2. 使用provide/inject：

父组件：

<template>
  <ChildComponent />
</template>
 
<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
 
provide('parentMessage', 'Hello from parent')
</script>

子组件：

<template>
  <div>{{ parentMessage }}</div>
</template>
 
<script setup>
import { inject } from 'vue'
 
const parentMessage = inject('parentMessage')
</script>

3. 使用Pinia进行状态管理：

首先安装Pinia：

npm install pinia

创建store.js：

import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({
    message: 'Hello from Pinia'
  }),
  actions: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
})

使用store：

<template>
  <div>{{ message }}</div>
</template>
 
<script setup>
import { useMainStore } from './store'
 
const store = useMainStore()
const message = store.message
</script>

以上代码展示了在Vue 3中三种常见的传值方法。props适合单向数据流，provide/inject和Pinia适合多个组件之间的复杂关系和全局状态管理。