在 Vue3 中,父组件向子组件传递数据有三种主要的接收方法:props、provide/inject 和 attrs。
1. 使用 props 接收数据:
在子组件中使用 `props` 选项来声明需要接收的属性,并通过父组件传递的属性值进行渲染和处理。父组件可以通过在子组件上绑定属性来传递数据。
示例代码:
```vue
// 子组件 Child.vue
<template>
<div>{{ propValue }}</div>
</template>
<script>
export default {
props: {
propValue: {
type: String,
required: true
}
}
}
</script>
// 父组件 Parent.vue
<template>
<Child :propValue="parentValue" />
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child },
data() {
return {
parentValue: 'Hello, World!'
}
}
}
</script>
```
在上面的示例中,子组件 `Child` 声明了一个名为 `propValue` 的属性,类型为 String,并且设置为必需属性(required)。父组件 `Parent` 通过绑定 `:propValue` 属性将 `parentValue` 传递给子组件。
2. 使用 provide/inject 提供和注入数据:
在父组件中使用 `provide` 来提供数据,然后在子组件中使用 `inject` 来注入数据。这种方法可以实现祖先组件向后代组件传递数据,跨越多个层级。
示例代码:
```vue
// 祖先组件 Ancestor.vue
<script>
import { provide } from 'vue';
export default {
setup() {
const ancestorValue = 'Hello, World!';
provide('ancestorValue', ancestorValue);
}
}
</script>
// 子组件 Child.vue
<template>
<div>{{ injectedValue }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const injectedValue = inject('ancestorValue');
return {
injectedValue
};
}
}
</script>
```
在上面的示例中,祖先组件 `Ancestor` 使用 `provide` 提供了名为 `ancestorValue` 的数据。子组件 `Child` 使用 `inject` 来注入 `ancestorValue` 数据,并在模板中使用它。
3. 使用 attrs 接收未声明的属性:
父组件可以将未在子组件中声明的属性通过 `v-bind="$attrs"` 绑定到子组件上,子组件可以通过 `$attrs` 访问这些属性。
示例代码:
```vue
// 子组件 Child.vue
<template>
<div>{{ $attrs.propValue }}</div>
</template>
// 父组件 Parent.vue
<template>
<Child propValue="Hello, World!" />
</template>
<script>
import Child from './Child.vue';
export default {
components: { Child }
}
</script>
```
在上面的示例中,父组件 `Parent` 将属性 `propValue` 绑定到子组件 `Child` 上,子组件通过 `$attrs.propValue` 访问这个未声明的属性。
这些是在 Vue3 中父组件向子组件传递数据的三种主要方法:props、provide/inject 和 attrs。你可以根据具体的需求选择合适的方法来实现数据的传递。