<script setup>
import { ref, onMounted } from 'vue'
// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
<template>
<input ref="input" />
</template>
6条答案
按热度按时间nwo49xxi1#
在vue 2中没有捷径。
Jeff的方法似乎已经在vue 2中被弃用了。
这里有另一种方法你可以实现你的目标。
个字符
cnwbcb6i2#
您可以使用指令
v-el
来保存元素,然后在以后使用它。https://vuejs.org/api/#vm-els
字符串
编辑:在Vue 2中不推荐使用,请参见西亚松回答
cbwuti443#
尽量不要通过直接引用DOM来进行DOM操作,这会带来很多性能问题,而且当我们试图直接访问DOM时,事件处理变得更加棘手,而是使用数据和指令来操作DOM。
这将给予您对操作的更多控制,您也将能够以模块化格式管理功能。
wqnecbli4#
您可以在API中的这两个页面的组合中找到答案:
*参考号
ref用于注册对元素或子组件的引用。引用将在父组件的$refs对象下注册。如果在普通DOM元素上使用,则引用将是该元素
*vm.$refs
一个对象,它保存已注册ref的子组件。
ckx4rj1h5#
如果你试图获取一个元素,你可以使用
Vue.util.query
,它实际上只是document.querySelector
的一个 Package 器,但在14个字符对22个字符(分别),它在技术上更短。它也有一些错误处理,以防你正在搜索的元素不存在。没有任何关于
Vue.util
的官方文档,但这是该函数的全部源代码:字符串
Repo链接:Vue.util.query
ctehm74n6#
更新Vue v3。现在有一个称为Template Ref(文档链接)的功能。在脚本部分创建ref后,将ref属性添加到您想要访问的元素将连接两者。
字符串