vue3中使用$refs

Posted 2022-09-01 左直拳

在vue2中，如果想直接引用页面中的对象，是这样子的：

<template>
<div><input type="text" ref="txt1" value="hello" /></div>
</template>

<script>
	export default 
		methods:
			test()
				console.log(this.$refs.txt1.value);
			,
		
	
</script>

但在vue3中，没有这种歌仔唱了。这破东西，变来变去，极为无聊，徒增学习成本。

在vue3中，没有$refs这个对象。原先的$emit变成了context.emit，但不会有context.refs这种东西。要直接使用页面对象，是这样子的：

<template>
<div><input type="text" ref="txt1" value="hello" /></div>
</template>

<script>
import  defineComponent, ref  from "vue";

export default defineComponent(
  setup() 
  	const txt1 = ref();

	const test = () => 
		console.log(txt1.value.value);
	
	
	return 
		txt1,//一定不要忘记在return中返回给外部
		test
	
  
);
</script>

看看这种代码，我感觉vue3并不比vue2高明，甚至更烂。估计vue4还会来个大改。