文心快码
在Vue 3.0中，组件之间的传值有多种方式，每种方式都有其特定的应用场景和优缺点。以下是Vue 3.0中常见的传值方式及其简要描述和示例代码：
### 1. 使用 `props`
**描述**：
`props` 是 Vue 中父组件向子组件传值最常用的方式。父组件通过属性绑定的方式将数据传递给子组件，子组件通过 `defineProps` 函数来声明接收的数据。
**示例代码**：
```vue
<!-- 父组件 -->
<template>
<ChildComponent :message="parentMessage" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const parentMessage = 'Hello from parent'
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script setup>
const props = defineProps({
message: String
})
</script>
```
### 2. 使用 `$emit` 触发自定义事件
**描述**：
子组件通过 `$emit` 方法触发自定义事件，并传递数据给父组件。父组件通过监听这个事件来接收子组件传递的数据。
**示例代码**：
```vue
<!-- 子组件 -->
<template>
<button @click="sendDataToParent">Send data</button>
</template>
<script setup>
const emit = defineEmits(['send-data'])
const sendDataToParent = () => {
const data = 'Hello from child'
emit('send-data', data)
}
</script>
<!-- 父组件 -->
<template>
<ChildComponent @send-data="handleChildData" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const handleChildData = (data) => {
console.log('Received data from child:', data)
}
</script>
```
### 3. 使用 `provide` 和 `inject`
**描述**：
`provide` 和 `inject` 是 Vue 3 中用于跨层级组件通信的 API。父组件通过 `provide` 提供数据或方法，子组件（无论层级多深）通过 `inject` 注入这些数据或方法。
**示例代码**：
```vue
<!-- 父组件 -->
<template>
<ChildComponent />
</template>
<script setup>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
provide('message', 'Hello from provide')
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>
```
### 4. 使用 `ref` 和 `$refs`
**描述**：
父组件可以通过 `ref` 属性给子组件赋一个唯一的标识符，然后通过 `$refs` 访问子组件的实例或 DOM 元素，从而直接调用子组件的方法或访问其数据。
**示例代码**：
```vue
<!-- 父组件 -->
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">Call Child Method</button>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue'
const childRef = ref(null)
const callChildMethod = () => {
if (childRef.value) {
childRef.value.childMethod()
}
}
</script>
<!-- 子组件 -->
<template>
<div>Child Component</div>
</template>
<script setup>
const childMethod = () => {
console.log('Child method called')
}
defineExpose({
childMethod
})
</script>
```
### 总结与对比
- **`props`**：适合父组件向子组件传值，是 Vue 中最基础和常用的传值方式。
- **`$emit`**：适合子组件向父组件传值，通过自定义事件实现。
- **`provide` 和 `inject`**：适合跨层级组件通信，但使用不当会增加组件间的耦合度。
- **`ref` 和 `$refs`**：可以直接访问子组件实例或 DOM 元素，但应谨慎使用，避免过度依赖。
### 额外资源
- [Vue 3 官方文档](https://v3.vuejs.org/)：包含 Vue 3 的所有核心功能和 API 的详细解释。
- [Vue 3 Composition API 指南](https://v3.vuejs.org/guide/composition-api-introduction.html)：深入了解 Vue 3 的 Composition API，包括 `defineProps`、`defineEmits` 等函数的使用。