Vue 子组件使用 this.$parent 无法调用父组件中的方法

1. 遇到的问题

在开发 Vue 项目中，遇到了一个这样的问题:

其中UI框架使用的是iview UI , 在子组件中利用 this.$parent.getList() 调用父组件中的 getList() 方法, 发 现调用不到该方法, 然后通过 this.$parent.$parent.getList() 就可以调用到

2. 分析

在子组件中打印 this.$parent，通过控制台的打印，发现打印出来的 this.$parent 并不是该组件的父组件，而是iView UI的组件，原来是我在父组件引用子组件的时候还在外面套了一层 UI 组件导致的

<template>
	<Content>
	  <div>列表</div>
	  <open-modal></open-modal>
	</Content>
</template>

3. 解决

将父组件中的子组件移到 UI 组件外面，测试后发现可以正常调用 this.$parent.getList() 了

<template>
	<div>
		<Content>
		  <div>列表</div>
		</Content>
		<open-modal></open-modal>
	</div>
</template>

4. 总结

1. 当我们使用第三方UI 框架而无法用 this.$parent 访问父组件的时候，如果非要考虑使用 $parent ，我们可以考虑多写几个 .$parent 直到找到你想要的那个父组件为止。
2. 而且vue官方文档明确告诉我们, 要有节制的使用 $parent 和 $children，他们主要的目的是作为访问组件的应急方法。更推荐使用 props 和 $emit 来实现父子组件之间的通信。