vue3中使用$refs

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

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

<script>
	export default {
		methods:{
			test(){
				console.log(this.$refs.txt1.value);
			},
		}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

但在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

或者

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

<script setup>
import { defineComponent, ref } from "vue";

const txt1 = ref();
const test = () => {
	console.log(txt1.value.value);
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

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