You could use a while loop, iterating over all the parent components.(您可以使用while循环，遍历所有父组件。)
getComponent(componentName) {
let component = null
let parent = this.$parent
while (parent && !component) {
if (parent.$options.name === componentName) {
component = parent
}
parent = parent.$parent
}
return component
},
Example:(例：)
mounted() {
console.log(this.getComponent('App'))
},
Utility function (TS):(实用功能（TS）：)
import Vue from 'vue'
/**
* @name findParentComponentByName
* @summary Find the Vue instance of the first parent component that matches the provided component name.
*
* @description The `findParentComponentByName()` method returns the Vue instance of the first parent component
* that has a `name` component option that matches the provided component name.
*
* @param {Vue} vm - The children component Vue instance that is looking for the parent component Vue instance
* @param {string} componentName - The parent component name
* @returns {Vue|undefined} The parent component instance that matches the provided component name,
* otherwise, undefined is returned
*
* @example
* // Find `<App/>` component from `<Child/>`:
* <App>
* <GrandParent>
* <Parent>
* <Child/>
* </Parent>
* </GrandParent>
* </App>
*
* // Descendant component Vue instance
* new Vue({
* name: 'Child',
*
* created() {
* const app = findParentComponentByName(this, 'App')
* // => VueComponent {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
* },
* })
*/
export function findParentComponentByName(
vm: Vue,
componentName: string
): Vue | undefined {
//
// Components tree:
// +---------------------+ return undefined, , <Child/> is not a descendant of <App/>
// | <App> |---> Return if component name option matches, otherwise
// |---------------------| continue traversing the tree upwards
// | <GrandParent> |-----> Return if component name option matches, otherwise
// |---------------------| continue traversing the tree upwards
// | <Parent> |-------> Return if component name option matches, otherwise
// |---------------------| traverse the tree upwards
// | <Child/> |---------> STARTING POINT, start looking for App component from here
// |---------------------|
// | </Parent> |
// |---------------------|
// | </GrandParent> |
// |---------------------|
// | </App> |
// +---------------------+
//
let component: Vue | undefined
let parent = vm.$parent
while (parent && !component) {
if (parent.$options.name === componentName) {
component = parent
}
parent = parent.$parent
}
return component
}
Example:(例：)
// In consuming component
import { findParentComponentByName } from '@/utils'
// ...
mounted() {
console.log(findParentComponentByName(this, 'App'))
},
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
