Vue2与Vue3中Ref绑定元素方式
作者：Wyyyy1024
这篇文章主要介绍了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 也可以是响应式的，且可以被侦听。
在需要的时候通过这个数组去取。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。