vue3中使用$refs

阅读数:63 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

在vue3中没有$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、el-input获取焦点

<el-input ref="refInput" 
clearable maxlength="100" 
placeholder="请输入审批意见" 
style="width: auto"
type="textarea" 
v-model="state.bz"></el-input>


import { ref,nextTick } from 'vue';
const refInput =ref()


const onOpenSp = (row) => {
			state.dialogFormVisiblse = true;
			nextTick(()=>{
				console.log("进入")
				refInput.value.focus()
			})
};

 




相关推荐

一、概述 在vue2中,data函数里返回的值直接为响应式,但在vue3中我们需要使用一些函数才能达到这个效果。 setup函数中拿不到vue的this。 二、常用函数 <template> <d

ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例。 <!-- `vm.$

最近自己做了一个网站,使用了cdn加速bootstrap和jquery的加载。这里先解释一下什么是cdn。 c

一、生命周期 1、vue2生命周期 beforeCreate #实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 created #实例创建完成后被立即同步调用 beforeMount #

一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

一、概述 <script setup> 是在单文件组件(SFC)中使用组合式API的编译时语法糖,解决Vue3.0中setup需要频繁将声明的变量、函数以及import引入的内容通过return向外

<script> export default { setup() { const func1= () => { console.log("func1");

缓存页面主要Jul为了防止重复渲染dom,减少加载时间及性能消耗,提高用户体验。 一、旧版的语法 <keep-alive> <router-view v-if="$route.meta.kee

一、在main.js挂载 import { createApp } from 'vue' import App from './App.vue' import router from './route

方式一、全局引入 全局引入element之后事,element已经在app.config.globalProperties添加了全局方法$message,所以可以在组件中直接使用。 方式二、按需引入