vue3 父子组件传参
时间: 2025-01-15 13:39:08 浏览: 54
### Vue3 父子组件传参方法
#### 使用 Props 从父组件向子组件传递数据
在 Vue 3 中,`props` 是一种常见的用于从父组件向子组件传递数据的方式。通过 `props`,可以将父组件的数据作为属性绑定到子组件上。
```html
<template>
<ChildComponent :parentData="dataFromParent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
dataFromParent: 'Hello from parent'
};
}
};
</script>
```
在这个例子中,父组件中的 `dataFromParent` 数据被传递给子组件,并命名为 `parentData` 属性[^2]。
为了接收这些数据,在子组件中需要定义对应的 `props`:
```javascript
// 子组件 (ChildComponent.vue)
<script>
export default {
props: ['parentData'],
mounted() {
console.log(this.parentData); // 输出 "Hello from parent"
}
}
</script>
```
这样就完成了从父组件到子组件的数据传递过程[^1]。
阅读全文
相关推荐

















