何为 $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>
Logo

前往低代码交流专区

更多推荐