vue3 中父传子defineProps
时间: 2023-08-16 09:14:29 浏览: 110
vue3 中父组件向子组件传递数据可以使用 `defineProps`。`defineProps` 是一个函数,用于定义子组件的 props。在子组件中使用 `defineProps` 定义的 props,可以接收父组件传递过来的数据。
例如,父组件中定义了一个名为 `message` 的 prop:
```vue
<template>
<div>
<ChildComponent :message="message" />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: {
ChildComponent
},
data() {
return {
message: 'Hello, Vue!'
};
}
});
</script>
```
在子组件中使用 `defineProps` 定义接收 `message` 的 prop:
```vue
<script>
import { defineComponent, PropType } from 'vue';
export default defineComponent({
props: {
message: {
type: String as PropType<string>,
required: true
}
},
setup(props) {
// 使用 props.message
console.log(props.message);
return {};
}
});
</script>
```
通过 `props.message` 可以在子组件中访问到父组件传递过来的数据。
阅读全文
相关推荐


















