vue2 与 vue3 $refs使用区别

tommyrunner

已于 2022-07-04 15:11:19 修改

阅读量1k

点赞数 1

分类专栏： web前端开发技巧文章标签： javascript 前端 vue.js

于 2022-06-29 23:40:11 首次发布

本文链接：https://blog.csdn.net/qq_43536071/article/details/125531727

版权

web前端开发技巧专栏收录该内容

13 篇文章 3 订阅

订阅专栏

本文详细介绍了Vue2和Vue3中$refs的使用差异，包括组件引用、动态赋值和操作router-view的方法。在Vue2中，$refs可以直接获取并操作组件，而在Vue3中，引用需要通过ref()函数创建，并且不能直接修改。对于router-view，Vue2可以直接调用其上的方法，Vue3则需要通过v-slot和组件实例来实现。

摘要由CSDN通过智能技术生成

vue2与vue3 $refs使用区别

vue2

操作组件

<template>
	<div>
        <element ref="element">按钮</element>
        <element id="element2">按钮</element>
    </div>
</template>

获取

console.log(this.$refs.element)

使用 (自定义组件)

// this.$refs.element.属性/函数...

动态赋值

this.$refs.element2 = document.getElementById('element2')

操作router-view

这种操作可能不太规范，但vue2确实是可以的

<!--
	这里假如 router-view 渲染初的组件携带test函数
-->
<template>
<div id="app">
    <router-view ref="view"></router-view>
    <button @click="callElement">调用组件函数</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        methods: {
            callElement() {
                this.$nextTick(()=>{
					this.$refs.view.test()
				})
            },
        },
    };
</script>

vue3

<template>
    <element ref="element">按钮</element>
    <element id="element2">按钮</element>
</template>

引入

import { onMounted, ref } from "vue";

获取

setup(){
    const element = ref(null);
    onMounted(()=>{
        console.log(element)
    })
    return {
        element
    }
}

获取多个

<template>
<element v-for="(item, index) in 10" :key="index" :ref="getRefElements" id="element2">按钮</element>
</template>
<script>
    export default {
        setup(){
            const refElements = ref([]);
            const getRefElements = (e) => {
                refs.value.push(e);
            };
            onMounted(() => {
                console.log(refElements);
            });
            return {
                getRefElements,
            };
        }        
    }

</script>

使用(自定义组件)

setup(){
    const element = ref(null);
    onMounted(()=>{
        // element.value.属性/函数...
    })
    return {
        element
    }
}

动态赋值

// setup中我们不能直接修改 ref(null) 所获取的值
// 尝试在mounted使用 this.$refs修改
 mounted() {
     console.log(this.$refs.element)// Proxy代理，可以直接调用组件数据和函数
     // this.$refs.hello = document.getElementById("element2"); // 不可以直接修改
     // vue3.0中暴露了this.$里有refs，这里可以动态修改
     this.$.res.hello = document.getElementById("element2");
 },

操作router-view

<!--
	这里假如 router-view 渲染初的组件携带test函数
-->
<template>
  <router-view v-slot="{ Component }">
    <component  ref="view" :is="Component" />
  </router-view>
  <button @click="callElement">调用组件函数</button>
</template>
<script>
    export default {
        data() {
            return {};
        },
        methods: {
            callElement() {
              this.$nextTick(()=>{
              	 this.$refs.view.test()
              })
            },
        },
    };
</script>