vue this.$parent的使用

vue组件this.$parent

在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件)

一、在实例中

this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods:

//例子
    this.$parent.list;//数据(模拟)
    this.$parent.request();//方法(模拟)

二、在组件中调用组件

this.$parent 写在组件里面,外部组件调用此组件,则其指向这个组件:

举个例子：

比如elementPlus的组件 el-menu ,我们将其里面的一级二级菜单封装为一个组件,命名为 name:‘DemoMenu’,

//例子
    <el-menu>
        <DemoMenu :list='list'/>
    </el-menu>

这种使用方式 this.$parent 就不是指向外部实例,而是指向 el-menu;

vue子组件this.$parent调用父组件方法报错

TypeError:this.parent.xxx is not a function

在做 vue 项目开发时，遇到了在子组件中利用this.$parent调用父组件的自定义方法，报TypeError: this.$parent.xxx is not a function的错，可是在父组件明明定义了该方法，遂查询 vue.js 的官方文档，但是文档也只有简短的说明，并没有相关的错误提示。

官方文档中没有提示，那就只能自己动手找原因了，随即就在子组件中打印了this.$parent ,通过控制台的打印，发现打印出来的 this.$parent并不是该组件的父组件，而是 Element ui 的组件，原来是我在父组件引用子组件的时候还在外面套了多层 UI 组件导致的。

<div class='app-container'>
    <el-row :guter='20'>
        <el-col>
            ......
            <el-card>
            ......
                <el-tabs v-model="activeName" @tab-click="handleClick">
                     <p slot="title">标题</p>
                     <my-component></my-component>
                 </el-tabs>
            </el-card>
        </el-col>
    </el-row>
</div>

打印this.parent会发现my−component的父组件为 parent会发现my-component的父组件为parent会发现my−component的父组件为 $el:div#pane-userinfo.el-tab-pane,需要一直$this.parent.parent.parent.parent.parent.parent找到 $el:div.app-contain 才可调用父组件方法。

或者将子组件移到 UI 组件外面也可以调用到

<div class='app-container'>
     <my-component></my-component>     
</div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。