在Vue3中，可以通过props将父组件的数据传递给子组件。具体步骤如下：
-
在父组件中定义要传递给子组件的数据，可以是data属性中的数据或者是计算属性computed中的数据。
-
在子组件中通过
props属性声明接收父组件传递的数据。 -
在子组件中使用接收到的数据。
下面是一个示例：
<template>
<div>
<h1>{{ message }}</h1>
<ChildComponent :child-message="message" />
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const message = ref('Hello, World!');
return {
message
};
}
};
</script>
子组件代码：
<template>
<div>
<h2>Child Component</h2>
<p>{{ childMessage }}</p>
</div>
</template>
<script>
import { defineProps } from 'vue';
export default {
props: {
childMessage: {
type: String,
required: true
}
},
setup(props) {
const childMessage = props.childMessage;
return {
childMessage
};
}
};
</script>
在父组件中，我们通过 props 将 message 变量传递给子组件 ChildComponent，子组件中定义了一个 childMessage props 来接收这个数据。
在子组件中，我们通过 defineProps() 函数来定义 childMessage props，同时在 setup() 函数中使用 props 参数来获取父组件传递过来的数据，并将其赋值给 childMessage 变量。
在子组件的模板中，我们就可以直接使用 childMessage 变量来渲染数据了。