1. 父传子
在 Vue 中,父组件可以通过 props
将数据传递给子组件。
父组件
<template>
<div>
<ChildComponent :myProp="parentData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentData: '我是父组件的数据'
};
}
};
</script>
子组件 (ChildComponent.vue
):
<template>
<div>{{ myProp }}</div>
</template>
<script>
export default {
props: {
myProp: String
}
};
</script>
2. 祖父传值(多级传值)
要把祖父组件的数据传递给孙组件,可以通过逐层传递 props
来实现,或者使用 Vuex 进行状态管理。但如果只是想要传递数据,不涉及到状态管理,那么逐层传递 props
是最简单的方式。
祖父组件:
<template>
<div>
<ParentComponent :grandparentData="grandparentData" />
</div>
</template>
<script>
import ParentComponent from './ParentComponent.vue';
export default {
components: {
ParentComponent
},
data() {
return {
grandparentData: '我是祖父组件的数据'
};
}
};
</script>
然后,在 父组件 中将 grandparentData
作为 props
传递给 子组件(同父传子),再由 子组件 传递给 孙组件。