vue子组件拿到它父组件的数据的4种方法
·
在Vue组件中,可以通过props属性来接收来自父组件的数据,然后在组件中使用这些数据。如果父组件需要将它的数据传递给子组件,可以将这些数据通过props传递给子组件。
如果要在子组件中获取嵌套它的页面的数据,可以使用Vue的依赖注入功能来实现。依赖注入允许父组件向子组件传递一些全局的依赖项,包括数据、方法、插件等等。子组件可以通过访问父组件的$parent属性来获取其父组件的数据,但这种方法不太优雅,而且容易受到组件层次结构的影响。
下面是一种更为优雅的方法,使用Vue的依赖注入来获取嵌套它的页面的数据:
0,普遍的是用this.$parent即可
this.$parent.someData
1,在父组件中定义一个全局的数据对象,将要传递给子组件的数据保存在这个对象中:
export default {
data() {
return {
globalData: {
// 要传递给子组件的数据
someData: 'Hello world'
}
}
}
}
2, 在父组件的模板中,使用provide属性将全局数据对象注入到组件实例中:
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
globalData: {
// 要传递给子组件的数据
someData: 'Hello world'
}
}
},
provide() {
return {
globalData: this.globalData
}
}
}
</script>
3,在子组件中,使用inject属性来注入父组件传递的全局数据对象,然后就可以在子组件中使用这些数据了:
<template>
<div>
<p>{{ globalData.someData }}</p>
</div>
</template>
<script>
export default {
inject: ['globalData']
}
</script>
在上面的代码中,父组件使用provide属性将全局数据对象注入到组件实例中。子组件使用inject属性来注入父组件传递的全局数据对象,然后就可以在子组件中通过this.globalData访问这些数据了。
需要注意的是,provide和inject属性只能用于祖先组件向后代组件传递数据,而不适用于子组件向父组件传递数据。如果需要在子组件中修改父组件的数据,应该使用事件和$emit方法来实现。
更多推荐
已为社区贡献2条内容
所有评论(0)