vue $refs的三种用法
我们都 知道 ，在vue2中获取DOM元素，可以直接在元素上绑定ref属性，然后获取到DOM元素的属性值，这种方法在vue3 中仍然可以使用，但也会有一些问题。
下面就介绍$refs的三种用法：
1、vue2中
在vue2中，我们可以直接使用ref 获取元素 ，也就是直接在元素上绑定ref属性，在直接使用this.$refs[‘自定义属性名’] 就能直接获取。
但是这样也是有一定 风险 的。因为ref绑定的在元素上，所以当元素没有进行渲染时，是不能通过ref获取到元素的。
<template>
? <div>
? ? <div ref=" BT n">我是一个按钮</div>
? </div>
</template>
?
<script>
?
export default {
? n am e: 'App',
? created() {
? ? //直接使用this.$refs获取DOM元素
? ? console. LOG (this.$refs.btn); // un define d
? ? this.$nextTick(() => {
?? ??? ?console.log(this.$refs.btn) ?//获取到正确元素
?? ?})
? },
? mount ed() {
?? ?console.log(this.$refs.btn); //获取到正确元素
? }
}
</script>
需要注意的是，在于vue2中使用这种方法获取v-for的元素时，获取到的是一个数组。
<template>
? <div>
? ? <div ref="btn" v-for="( IT em , index) in 3" :key="index">我是一个按钮</div>
? </div>
</template>
?
<script>
?
e xp ort default {
? name: 'App',
? mounted() {
? ? //获取到的是一个元素数组?
?? ?console.log(this.$refs.btn);?
? }
}
</script>
2、vue3中
在一般情况下，vue2的获取元素的方法在vue3也完全适用。
但是，有时候可能会遇到无法获取这个节点， 原因 是生命周期的问题，在vue3中 原来 的created没有了，而 SETUP 充当了原来的 created。
所以在 setup 的时候，dom元素还没有被创建，只有setup完毕了之后HT ML 才能构建，这时才能真正访问到value值，所以自然就无法获取到dom节点，要想解决这个问题，就要配合钩子函数 onMounted ，在dom挂载完毕后再进行获取。
<template>
?? ?<div id="ref">
? ? ? ? <!--在元素上用 ref="butRef" 绑定-->
?? ??? ?<button ty PE ="button" ref="butRef" >按钮元素</button>
?? ?</div>
</template>
?
<script>
? ? //引入ref
?? ?import {ref, onMounted} From 'vue'
?? ?export default {
?? ??? ?setup() {
?
? ? ? ? ? ? //需要先定义butRef
?? ??? ??? ?let butRef = ref(null)
? ? ? ? ? ? onMounted(()=>{
? ? ? ? ? ? ? //使用的时候为 butRef.value（需要加点value获取DOM 元素值 ）
?? ??? ??? ? ?console.log(butRef.value);
? ? ? ? ? ? })
?? ??? ??? ?return {
?? ??? ??? ??? ?butRef
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>
3、vue3的组合API（composition-api）
最后一种方法就是从上下文 Ctx（context）中解构构出 refs，虽然这里refs可能会提示已经 被弃 用，但是在这里仍然是可以用的。
<template>
?? ?<div id="ref">
?? ??? ?<button type="button" ref="butRef" >按钮元素</button>
?? ?</div>
</template>
?
<script lang="ts">
import { define component , ref, watch } f rom '@vue/composition-api';
?
export default defineComponent({
? ? name: '',
? ? components: {},
? ? setup ( PR ops, ctx) {
? ? ? ? //从Ctx（context）中解构出 refs
? ? ? ? const { emit, refs } = ctx;
? ? ? ? ? ??
? ? ? ? watch(filterText, (val) => {
? ? ? ? ? ? //在使用的时候直接用 refs.butRef
? ? ? ? ? ? //refs.butRef.filter(val);
? ? ? ? ? ? (refs.butRef as Any).filter(val);
? ? ? ? });
?? ??? ?return {
?? ??? ??? ?butRef
?? ??? ?}
?? ?}
}
</script>
对vue中$refs的理解
$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。
描述
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，
如果在普通的DOM元素上使用，引用指向的就是DOM元素；
如果用在子组件上，引用就指向组件实例，
另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div ref="node">Node</div>
<layout-div ref="layout"></layout-div>
<div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
</div>
</body>
<script src="https://cdn.bootcss .COM /vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue测试数据ponent("layout-div", {
data: function(){
return {
count: 0
}
},
template: `<div>
<div>{{count}}</div>
</div>`
})
VAR vm = new Vue({
el: ' # app',
mounted: function(){
console.log(this.$refs.node); // <div>Node</div> // DOM元素
console.log(this.$refs.layout); // VueComponent {_uid: 1, .. .} // 组件实例
console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
}
})
</script>
</html>
因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不 应该 试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.bootcss测试数据/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function(){
return {
msg: 0
}
},
template: `<div>
<div ref="node">{{msg}}</div>
<button @click="updateMsg">button</button>
</div>`,
beforeMount: function(){
console.log(this.$refs.node); // undefined
},
mounted: function(){
console.log(this.$refs.node); // <div>0</div>
},
methods: {
updateMsg: function(){
this.msg = 1;
console.log(this.$refs.node.innerHTML); // 0
this.$nextTick(() => {
console.log(this.$refs.node.innerHTML); // 1
})
}
}
})
</script>
</html>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue中动态渲染数据时使用$refs无效的解决 vue?循环动态设置ref并获取$refs方式 Vue通过ref获取不到$refs问题 VUE中$refs的基本用法举例 vue如何在for循环中设置ref并获取$refs Vue 实例中使用$refs的注意事项
总结
以上是 为你收集整理的 vue中$refs的三种用法解读 全部内容，希望文章能够帮你解决 vue中$refs的三种用法解读 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于vue中$refs的三种用法解读的详细内容...