vue子组件获取父组件

父组件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子组件获取父组件其他方法