【Vue】何为 $parent ？它的使用场景是什么？

何为 $parent ？

$ 是什么？

首先 一般默认的来说，我们带 $ 符号的我们基本默认是 vue 实例对象身上的也就是 vue 中的 this，我们可以 console 一下 this

$parent 简介

官方介绍：

$parent：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己

1. $parent 既 可 以 接 受 父 组 件 数 据 ， 又 可 以 修 改 父 组 件 数 据， 是 双 向 的
2. $parent 可以调用父组件的方法

使用场景

子组件发生某个事件，在事件执行的方法中，需要访问或者更改父组件数据属性或调用父组件方法，此时用$parent【 该属性不常使用 】

<div id="app">
	<cpn></cpn>	
</div>
<template id="tem">
	<div>
		<p>我是子组件</p>
		<button @click="btnclick">按钮</button>
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			name:'xixixi'
		},		
		methods:{
			parentPrint(){
				console.log("父组件方法");
			}
		},
		components:{
			cpn:{
				template:'#tem',
				methods:{
					btnclick(){
						//获取父组件name值
						console.log(this.$parent.name);
						//修改父组件name值
						this.$parent.name ="ssss";
						this.$parent.parentPrint();
					}
				}
			}
		}
	});
</script>