vue $parents,vue方法中的this

　　本文主要介绍这个的用法。$parent in vue，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

vue组件this.$parent

　　使用vue时，可以使用这个。$parent在组件和组件之间或组件和外部实例之间进行数据和方法调用。下面简单介绍下两个环境。(这里你可以理解为外部实例是非第三方组件。)

一、在实例中

　　这个。$parent写在组件中。当外部实例调用这个组件时，它指向vue实例(这里是调用组件的实例)。您可以在组件中调用数据、方法：

　　//示例

　　这个。$ parent.list//数据(模拟)

　　这个。$ parent . request()；//方法(模拟)

二、在组件中调用组件

　　这个。$parent写在组件中。当外部组件调用该组件时，它指向该组件：

　　举个例子：

　　比如elementPlus的组件el-menu，我们把它里面的一级和二级菜单封装成一个组件，命名为：‘Demo Menu’。

　　//示例

　　el菜单

　　DemoMenu :list=list/

　　/el-menu

　　就这样，这个。$parent不指向外部实例，而是指向El-menu；

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

TypeError:this.parent.xxx is not a function

　　在vue项目的开发过程中，我遇到了用这个调用父组件的自定义方法。$parent，并报告了TypeError错误：this。$ parent.xxx不是一个函数。但是这个方法在父组件中有明确的定义，所以我查询了vue.js的官方文档，但是文档只有简单的描述，没有相关的错误提示。

　　公文里没有提示，只能自己找原因。然后，你打印了这个。子组件中的$parent。通过控制台打印后，发现打印了这个。$parent不是该组件的父组件，而是元素ui的组件。原来父组件引用子组件的时候，我在外面设置了多个UI组件。

　　div class=应用程序容器

　　el-row :guter=20

　　埃尔-科尔

　　电子贺卡

　　El-tabs v-model= active name @ ta B- click= handle click

　　P slot=title title /p

　　我的组件/我的组件

　　/el-tabs

　　/电子名片

　　/el-col

　　/el-row

　　/div

　　打印this.parent你会发现我的组件的父组件是parent，你会发现我的组件的父组件是parent，你会发现我的组件的父组件是$ El:div # pane-userinfo . El-tab-pane，调用父组件方法前需要$ this . parent . parent . parent . parent . parent . parent找到$el:div.app-contain。

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