vue的this.$parent的使用

vue组件this.$parent

在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件)

一、在实例中

this.$parent 写在组件里面,外部实例调用此组件,则其指向vue实例(这里是调用组件的实例),你可以在组件中调用 data,methods:

//例子·🌰
	this.$parent.list;//数据(模拟)
	this.$parent.request();//方法(模拟)
           

二、在组件中调用组件

this.$parent 写在组件里面,外部组件调用此组件,则其指向这个组件:

举个例子:

比如elementPlus的组件 el-menu ,我们将其里面的一级二级菜单封装为一个组件,命名为 name:‘DemoMenu’,

//例子🌰
	<el-menu>
		<DemoMenu :list='list'/>
	</el-menu>
           

这种使用方式 this.$parent 就不是指向外部实例,而是指向 el-menu;