this.$parent为什么失效

• 在子组件中，我们可以通过this.$parent来调用父组件中的变量

//子组件中
methods:{
	sonMethods(){
		this.$parent.name  //获取到父组件中的name变量
		this.$parent.getNameList  //调用父组件中的getNameList方法
	}
}


//父组件中
data() {
	return {
		name: "wyf",
		age: "18"
	}
}
methods: {
	getNameList(){
		console.log("获取姓名列表啦~")
	}
}

• 但是，如果我们经常使用this.$parent，就会发现，有时候会产生我们需要的效果，有时候什么事都不会发生，调用不成功，这是为什么呢？
  因为，有时候子组件的外层还有UI组件，那么该子组件的父组件就变成了UI组件。
  比如：

//父组件中
<template>
	<el-tabs>
		<el-tab-pane>    //可以在子组件中打印this.$parent,结果为 el-tab-pane
			<SonComponent/>   //子组件SonComponent的父组件为el-tab-pane
		<el-tab-pane>   //如果我们利用this.$parent来获取data中的变量，得到的结果为undefined
	<el-tabs>           //因为el-tab-pane中没有对应的值
</template> 

• 总结

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