vue中this.$parent的使用方式

vue中this.$parent的使用方式

目录

vue组件this.$parent

一、在实例中

二、在组件中调用组件

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

TypeError:this.parent.xxx is not a function

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

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读