在VUE3的setup函数中如何引用（$ref）Html页面元素

一、关于ref的知识点

在react hooks中，有一个保存引用值的方法useRef，其实跟vue3中的ref很像，难免让我感觉他们的用法也差不多，下面是在react中的写法：

const myswiper = useRef(null); 
<Swiper ref={
    
    myswiper}/>

小伙伴们是不是恍然大悟？是不是vue中也这么用？

二、在vue3中，在setup函数中使用ref来引用页面元素

1. 封装一个抽屉组件。

<template>
  <a-drawer
      v-model:visible="visible"
      class="custom-class"
      style="color: red"
      title="Basic Drawer"
      placement="right"
      @after-visible-change="afterVisibleChange"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>

<script>
import {
    
    ref} from 'vue';

export default {
    
    
  name: "rightPanel",
  setup() {
    
    
    const visible = ref(false);

    const afterVisibleChange = (bool) => {
    
    
      console.log('visible', bool);
    };

    const showDrawer = () => {
    
    
      visible.value = true;
    };

    return {
    
    
      visible,
      afterVisibleChange,
      showDrawer,
    };
  },
}
</script>

<style scoped>

</style>

showDrawer这个方法用来展示这个抽屉。

2. 在其他组件中通过ref的方式来调用上面注册的抽屉组件。

<template>
   <div style="position: relative" @click="openProcess">
  <right-panel ref="rightDrawer"></right-panel>
</template>
<script>
import kricon from "./KeyResultIdx.vue"
import popState from "./popState.vue";
import {
    
    toRef, inject, ref, onMounted,} from 'vue'
import rightPanel from "./rightPanel.vue";

export default {
    
    
  name: "okr-item",
  components: {
    
    
	rightPanel
  },
  setup() {
    
    
    const rightDrawer = ref(null)
    function openProcess() {
    
    
      console.log(rightDrawer)
      rightDrawer.value.showDrawer() 
    }
    return {
    
    
      openProcess,
      rightDrawer,
    }
  },
}
</script>

三、其他方式

通过在setup中获取this的方式，其实是属于歪门邪道了。