vue3组件ref属性用法，动态绑定ref

hongkid2024-05-15 10:08

常见用法

TypeScript 复制代码

<template>
    <CustomWin  ref="sectionRef" class="ref-section"></CustomWin >
    <button @click="xx">点击</button>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import CustomWin from "./CustomWin.vue"
const sectionRef = ref<InstanceType<typeof CustomWin>>();

function xx(){
    if(sectionRef.value){
       // sectionRef.value.xxx 调用
    }
}

</script>

如果我们需要在代码里面动态绑定ref，如果处理？

其实ref属性可以是个函数，(el)=>{},这样想怎样存储ref就可以怎样存储

TypeScript 复制代码

<template>
  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
import {
  onBeforeUpdate,
  reactive,
  ref,
} from 'vue';

export default {
  setup() {
    const list = reactive([1, 2, 3]);
    const divs = ref([]);

    // Make sure to reset the refs before each update.
    onBeforeUpdate(() => {
      divs.value = [];
    });

    return {
      list,
      divs,
    };
  },
};
</script>

注：el是就是vue实例，赋值后访问的时候无需xx.value