vue3 setup prps 父传子
时间: 2023-11-17 10:51:06 浏览: 34
在Vue3中,可以使用props来实现父组件向子组件传值。在setup函数中,通过在参数中声明props来接收父组件传递的数据。然后可以在模板中使用这些props数据。下面是一个示例:
```javascript
// 父组件
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const parentMessage = ref('Hello from parent');
return {
parentMessage
};
}
};
</script>
// 子组件 ChildComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
import { defineProps } from 'vue';
export default {
props: {
message: {
type: String,
required: true
}
},
setup(props) {
return {
message: props.message
};
}
};
</script>
```