在Vue 3中，传递数据常用的方法有props、provide/inject、以及状态管理库如Pinia。以下是这三种方法的简单示例：
- 使用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>
- 使用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>
- 使用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适合多个组件之间的复杂关系和全局状态管理。