首先在vue2中是可以使用this.$refs.xxx获取到对应的ref属性的html标签的。
但是在vue3中就不能这么用了,vue3使用组合式api后就不存在this。官方提供了方法—模板引用。

//html代码部分
 <div ref="test">测试</div>

//setup()部分
setup(){ 
		//注意这里一定要和前面标签中的 ref属性的值一模一样
		const test = ref(null)
        onMounted(() => {
        		 // DOM 元素将在初始渲染后分配给 ref
               console.log(test.value);
                })
        return{ test }
  }

最后输出的结果:
在这里插入图片描述
官方连接:模板引用

Logo

前往低代码交流专区

更多推荐