Vue中props与$parent的区别及使用场景实例_vue $parent.parentproperty-优快云博客

本文链接：https://blog.youkuaiyun.com/CiCiCi12/article/details/107026941

本文探讨Vue中props与$parent的区别。props用于单项数据绑定，从父组件向子组件传递数据；而$parent不仅能接收数据，还能双向修改并调用父组件方法。在需要子组件渲染父组件数据时，使用props；若需在子组件事件中访问或改变父组件状态，可使用$parent，但这并不常见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学Vue，发现props和$parent貌似都可以进行父子传递，那到底有什么区别呢？分别是在什么场景使用呢？

共同处：
都能够接收来自父组件数据。
不同处：
1）props仅仅只能接收，单项绑定。着重数据传递。向子组件传递数据。
2） $p a r e n t 既可以接受父组件数据，又可以修改父组件数据。是双向的。 3 ）$ parent还可以调用父组件的方法。
场景1.子模版里需要渲染显示父组件数据
注：组件作用域是独立的，子组件与父组件不能直接互访数据。此时props可以将父组件数据下发给子组件。

<div id="app">
	<cpn :cname="name"></cpn>	
</div>
<template id="tem">
	<div>
		<p>我是子组件</p>
		{{cname}}
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			name:'xixixi'
		},		
		components:{
			cpn:{
				template:'#tem',
				props:{
					cname:{
						type:String
					}
				}
			}
		}
	});

场景2.子组件发生某个事件，在事件执行的方法中，需要访问或者更改父组件数据属性或调用父组件方法，此时用$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>