当前位置：首页 > news >正文

vue 子组件获取父组件

news 来源：原创 2024/7/26 20:55:08

父组件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;
      },
      }
}