如何在vue3中使用this.$refs.xxx，举例了vant组件库的组件实例方法方法使用

如何在vue3中使用this.$refs.xxx

之前使用vant组件库的时候有遇到过这种组件实例方法比如：
Swipe 方法
通过 ref 可以获取到 Swipe 实例并调用实例方法，详见组件实例方法。

方法名 说明 参数 返回值
prev 切换到上一轮播 - -
next 切换到下一轮播 - -
swipeTo 切换到指定位置

点进详情里面去显示示例：

<van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox>
export default {
  data() {
    return {
      checked: false,
    };
  },
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.$refs.checkbox.toggle();
  },
};

这明显不是vue3的写法，我们转换一下
我使用的是轮播图组件，需要先绑定ref=“preee”，
然后在方法里面使用preee.value.prev();

<template>
  <div>
    <div class="swipe">
      <van-swipe :show-indicators="false" ref="preee">
        <van-swipe-item ></van-swipe-item>
        <van-swipe-item ></van-swipe-item>
        <van-swipe-item ></van-swipe-item>
        <template #indicator>
          <div class="custom" @click="prevs"><van-icon name="arrow-left" /></div>
          <div class="indicator" @click="nexts"><van-icon name="arrow" /></div>
        </template>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';
export default {
  name: '',
  setup() {
    const preee = ref();
    const prevs = () => {
      preee.value.prev();
      console.log('上一张');
    };
    const nexts = () => {
      preee.value.next();
      console.log('下一张');
    };
    onBeforeMount(() => {});
    onMounted(() => {
    });
    return { prevs, nexts, preee };
  },
};
</script>

有什么疑问欢迎在文章里讨论，求关注，点赞，希望大家都能成为大佬！！！