Vue中$refs与$emit的区别及使用场景实例

最新推荐文章于 2025-02-04 10:11:25 发布

原创最新推荐文章于 2025-02-04 10:11:25 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue中$refs和$emit的使用区别。$refs允许父组件访问和修改子组件数据及调用方法，常用于需要直接操作子组件的情景。而$emit则是子组件向父组件传递数据，数据传递是单向的，父组件只能接收数据，无法直接修改子组件状态或访问其他属性。

$r e f s ： 1) 父组件既可以通过$ refs访问或修改子组件的数据，又可以访问子组件方法。
场景1：父组件发生某个事件，在事件执行的方法中，需要访问或者更改子组件数据属性或调用子组件方法。
此时可以使用 $c h i l d r e n 和$ refs.但是 $c h i l d r e n 不常用，通常使用$ refs。

	<div id="app">
		<cpn ref="cpnRef"></cpn>
		<button @click="btnclick">按钮</button>
	</div>
	<template id="tem">
		<div>
			<p>我是子组件</p>
			{{message}}				
		</div>
	</template>
	<script src="../js/vue.js"></script>
	<script>
		let app = new Vue({
			el:'#app',
			data:{
				name:'xixixi'
			},
			methods:{
				btnclick(){
					console.log("这是父组件方法");
					//this.$children[0].cpnclick();
					this.$refs.cpnRef.cpnclick();
					//console.log(this.$refs.cpnRef.message);
					this.$refs.cpnRef.message = 'info';
				}
			},
			components:{
				cpn:{
					template:'#tem',
					data(){
						return{
							message:'mess'
						}		
					},
					methods:{
						cpnclick(){
							console.log("这是子组件方法");		
						}
					}
				}
			}
		});
	</script>

$. e m i t 1 ）当子组件触发某个事件时，将子组件数据传给父组件。数据是单项传递的。 2) 通过$ emit父组件只能获取子组件传递过来的数据，不能修改此数据，也不能访问子组件其他属性以及方法。

场景2：父组件发生某个事件，在事件执行的方法中，需要访问或者更改子组件数据属性或调用子组件方法。

	<div id="app">
		<cpn @cpnclick="parentclick"></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:{
				parentclick(value){
					console.log("从子组件传递过来的值为:"+value);			
				}
			},
			components:{
				cpn:{
					template:'#tem',				
					methods:{
						btnclick(){					
							let value = "hello world";	
							console.log("将要传递给父组件的值为:"+value);	
							this.$emit('cpnclick',value);
						}
					}
				}
			}
		});
	</script>