vue中$refs的三种用法解读

目录

• vue $refs的三种用法
• 1、vue2中
• 2、vue3中
• 3、vue3的组合API（composition-api）
• 对vue中$refs的理解
• 描述
• 总结

vue $refs的三种用法

我们都知道，在vue2中获取DOM元素，可以直接在元素上绑定ref属性，然后获取到DOM元素的属性值，这种方法在vue3 中仍然可以使用，但也会有一些问题。

下面就介绍$refs的三种用法：

1、vue2中

在vue2中，我们可以直接使用ref获取元素，也就是直接在元素上绑定ref属性，在直接使用this.$refs[‘自定义属性名’] 就能直接获取。

但是这样也是有一定风险的。因为ref绑定的在元素上，所以当元素没有进行渲染时，是不能通过ref获取到元素的。

template>
      div>
        div ref="BTn">
    我是一个按钮/div>
      /div>
    /template>
     script>
 export default {
  name: 'App',  created() {
        //直接使用this.$refs获取DOM元素    console.LOG(this.$refs.btn);
     // undefined    this.$nextTick(() =>
 {
        console.log(this.$refs.btn)  //获取到正确元素    }
)  }
,  mounted() {
        console.log(this.$refs.btn);
 //获取到正确元素  }
}
    /script>
    

需要注意的是，在于vue2中使用这种方法获取v-for的元素时，获取到的是一个数组。

template>
      div>
        div ref="btn" v-for="(ITem , index) in 3" :key="index">
    我是一个按钮/div>
      /div>
    /template>
     script>
 export default {
  name: 'App',  mounted() {
        //获取到的是一个元素数组     console.log(this.$refs.btn);
   }
}
    /script>
    

2、vue3中

在一般情况下，vue2的获取元素的方法在vue3也完全适用。

但是，有时候可能会遇到无法获取这个节点，原因是生命周期的问题，在vue3中原来的created没有了，而 @R_777_1315@ 充当了原来的 created。

所以在 setup 的时候，dom元素还没有被创建，只有setup完毕了之后HTML才能构建，这时才能真正访问到value值，所以自然就无法获取到dom节点，要想解决这个问题，就要配合钩子函数 onMounted ，在dom挂载完毕后再进行获取。

template>
        div id="ref">
            !--在元素上用 ref="butRef" 绑定-->
            button tyPE="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 {
 definecomponent, ref, watch }
     from '@vue/composition-api';
 export default defineComponent({
    name: '',    components: {
}
,    setup (PRops, 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.component("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.com/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的注意事项

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！