快捷導(dǎo)航

Vue2與Vue3中Ref綁定元素方式

更新時(shí)間：2023年11月15日 08:49:32 作者：Wyyyy1024

這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue之Ref綁定元素獲取實(shí)例

我們可以通過(guò)給元素綁定ref屬性來(lái)獲取這個(gè)元素的實(shí)例，來(lái)調(diào)用實(shí)例中的某種方法來(lái)實(shí)現(xiàn)某種功能

Vue2實(shí)現(xiàn)

<template>
    <!-- 單個(gè)綁定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循環(huán)綁定 -->
  <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");//結(jié)果為單個(gè)對(duì)象
    console.log(this.$refs.HelloArrRef, "HelloArrRef");// 結(jié)果為數(shù)組 
  },
  methods: {
  },
};

在vue2寫法下，無(wú)論綁定單個(gè)元素或者循環(huán)綁定元素我們可以通過(guò)this.$refs.實(shí)例名稱來(lái)獲取組件實(shí)例

Vue3實(shí)現(xiàn)

vue3中循環(huán)綁定ref是和vue2寫法略有不同，單個(gè)組件綁定寫法是一致的

<template>
  <!-- 單個(gè)綁定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循環(huán)綁定 -->
  <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中循環(huán)綁定元素，與vue2不同是 ref需要先綁定一個(gè)方法通過(guò)這個(gè)方法獲取到實(shí)例保存在一個(gè)數(shù)組中

注意：

1.不必是數(shù)組：它也可以是一個(gè)對(duì)象，其 ref 可以通過(guò)迭代的 key 被設(shè)置。

2.如有需要，HelloRefArr 也可以是響應(yīng)式的，且可以被偵聽(tīng)。

在需要的時(shí)候通過(guò)這個(gè)數(shù)組去取。