父组件vue
<template><el-carousel indicator-position="outside"><el-carousel-item ><child /></el-carousel-item><el-carousel-item ><h3>{{ 2 }}</h3></el-carousel-item></el-carousel>
</template>import child from './components/child';
export default {
componentName:'parenName',//自己定义组件名称
component:{child},data() {return {globalData: {// 要传递给子组件的数据someData: 'Hello world'}}}
}
以上代码我需要在子组件获取父组件的数据如果用的 this.$parent.globalData 获取的是空的,打印发现的父组件是el-carousel组件下的数据。
获取this.$parent.globalData的解决方法
子组件
child.vue
export default {computed: {parent() {//$options是一个对象,可以调用vue的各个组件下的方法和数据const componentName = "parenName";//这里的名称必须和父组件自定义名称一致let parent = this.$parent;let parentName = parent.$options.componentName; while (parent && parentName !== componentName) {parent = parent.$parent;parentName = parent.$options.componentName;}return parent;},}
}
vue子组件获取父组件其他方法
vue子组件获取父组件其他方法