How to use this.$parent in vue

vue component this.$parent

When using vue, you may use this.$parent to make data and method calls between components and components or components and external instances. Here are two usage environments. (Here you can understand that external instances are non-third-party components)

1. In the example

This.$parent is written inside the component. When the external instance calls this component, it points to the vue instance (here is the instance that calls the component). You can call data, methods in the component:

//example    this.$;//Data (simulation)    this.$();//method(simulation)

2. Call components in components

This.$parent is written inside the component. When the external component calls this component, it points to this component:

For example:

For example, the component el-menu of elementPlus, we encapsulate the first-level and second-level menu into a component and name it name: ‘DemoMenu’,

//example    <el-menu>
        <DemoMenu :list='list'/>
    </el-menu>

This way of using this.$parent does not point to an external instance, but to el-menu;

vue child component this.$parent calls the parent component method and reports an error

TypeError: is not a function

When developing a vue project, I encountered the error of using this.$parent to call the parent component's custom method in the child component and reported TypeError: this.$ is not a function. However, the parent component clearly defined the method and then queryed the official document, but the document only has a brief description and no related error prompts.

There is no prompt in the official document, so I can only find the reason by myself. I immediately printed this.$parent in the child component. Through the console printing, I found that the printed this.$parent is not the parent component of the component, but the Element ui component. It turned out that I had multiple layers of UI components outside when the parent component referenced the child component.

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

Printing will find that the parent component of my−component is parent. When printing, you will find that the parent component of my-component is parent. When printing, you will find that the parent component of my−component is $el:div#-tab-pane. You need to find $el:-contain all the time before you can call the parent component method.

Or you can also call the child component outside the UI component

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

The above is personal experience. I hope you can give you a reference and I hope you can support me more.