Vue2与Vue3中Ref绑定元素

Vue之Ref绑定元素获取实例

我们可以通过给元素绑定ref属性来获取这个元素的实例，来调用实例中的某种方法来实现某种功能

Vue2实现

<template><!-- 单个绑定 --><HelloWorld ref="HelloRef" /><!-- 循环绑定 --><div v-for="item in arr" :key="item"><hello-world ref="HelloArrRef"></hello-world></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {name: "App",components: {HelloWorld,},data() {return {count:0};},mounted() {console.log(this.$refs.HelloRef, "HelloRef");//结果为单个对象console.log(this.$refs.HelloArrRef, "HelloArrRef");// 结果为数组 },methods: {},
};

在vue2写法下，无论绑定单个元素或者循环绑定元素我们可以通过this.$refs.实例名称来获取组件实例

Vue3实现

vue3中循环绑定ref是和vue2写法略有不同，单个组件绑定写法是一致的

<template><!-- 单个绑定 --><HelloWorld ref="HelloRef" /><!-- 循环绑定 --><div v-for="item in arr" :key="item"><hello-world :ref="setItemRef"></hello-world></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import { defineComponent, onMounted,onBeforeUpdate,onUpdated, ref } from "vue";export default defineComponent({name: "App",components: {HelloWorld,},setup() {const HelloRef = ref(null);const arr = ref([1, 2, 3]);const HelloRefArr = ref([]);const setItemRef = (el) => {if (el) {HelloRefArr.value.push(el);}};onMounted(() => {console.log(HelloRef.value, "HelloRef");console.log(HelloRefArr.value, "HelloRefArr");});onBeforeUpdate(() => {HelloRefArr.value = []})onUpdated(() => {console.log(HelloRefArr.value,' HelloRefArr.value--update')})return {HelloRef,arr,setItemRef,HelloRefArr,};},
});
</script>

在vue3中循环绑定元素，与vue2不同是 ref需要先绑定一个方法通过这个方法获取到实例保存在一个数组中（ 注意：1.不必是数组：它也可以是一个对象，其 ref 可以通过迭代的 key 被设置。2.如有需要，HelloRefArr 也可以是响应式的，且可以被侦听。）在需要的时候通过这个数组去取。

官方文档：
vue2—ref
vue3—ref

Vue2与Vue3中Ref绑定元素相关推荐

vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果
在vue2.vue3中基于Three.js使用多张全方位照片拼接全景vr效果 Vue3 代码如下(示例): <template><div class="Create&quo ...
Vue3和element plus 中ref用法元素实例操作
在 vue3 中,组件的逻辑可以放在 setup 函数里面,但是 setup 中不再有 this,所以 vue2 中的 this.$refs 的用法在 vue3 中无法使用. 用法是: element ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...
vue2和vue3中mixins的使用
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件 ...
一文看懂Vue2和Vue3中设置404界面
vue页面中,如果跳转了不存在的路由那么,那么页面就会出现白屏状态,为了解决这个问题,我们可以自己写一个404界面,让其跳转过去. 一.vue2 1.index.js 在此文件中,一般存放的都是我们的 ...
vue2、vue3中使用swiper
两个项目中需要使用轮播图,恰好一个是vue2的,一个是vue3的,使用swiper过程中踩了很多的坑,总结一下. 一.vue3中使用swiper vue3中使用swiper,对应版本为7-8,整个过程 ...
技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据
需求背景当前有一个页面为父路由页面(/system) 他的子页面是他的两个下级(/system/user /system/auth) 由于搜索框及添加按钮都在父级母版中,现在需要在点击添加按钮或者搜 ...

Vue2与Vue3中Ref绑定元素

Vue之Ref绑定元素获取实例

Vue2实现

Vue3实现

Vue2与Vue3中Ref绑定元素相关推荐

最新文章

热门文章