或者
dd

// $refs
showManagerModal () {
  this.$refs.avaUserTreeSelect.showModal(this.form.managers)
  console.log(this.$refs.user.text)
},

//普通Dom

import { ref } from 'vue';
// modal調(diào)整部門彈層Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);

也許這里有人疑問，為什么聲明了一個和template的ref中同名的常量變量就綁定了對應的dom? 在這里再補充說明一下：

• Vue3 在早期版本（ 3.0.0-beta.21 之前）中對 composition api 的支持，只能在組件選項 setup 函數(shù)中使用。而相應式的變量都是通過在setup()方法中return {寫入需要在模版中使用的變量或方法}

• 在 3.0.0-beta.21 版本中增加了

  子組件ExchangeValidModalVue.vue

  
  
  const visibleExchange = ref(false);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  });
  watch(
    () => props.visible,
    (cur, pre) => {
      visibleExchange.value = cur;
      if (cur) {
        firstTag.value = 1;
      }
    },
  );
  watch(
    () => visibleExchange.value,
    (cur, pre) => {
      emits('update:visible', cur);
    },
  );
  

  從代碼里面我們就可以發(fā)現(xiàn)通過用父子組件單向傳遞的方式去實現(xiàn)一個組件的顯示和隱藏功能，我們需要如此費勁地聲明多個變量，還要做兩次監(jiān)聽，萬一后面不止一個這樣的參數(shù)進行傳遞，那么代碼量可想而知，而且也不易維護。

  其實顯示和隱藏的功能可以直接在內(nèi)部中進行值的響應即可，并不需要在父級別中操作，如下將上面代碼改變一下：

  子組件ExchangeValidModalVue.vue

  
  
  import { ref } from 'vue';
  const visible = ref(false);
  const emits = defineEmits(['call']);
  const onEmitSelectSuperiod = () => { // 省略
    emits('call');
  }；
  const onOpen = () => {
    visible.value = true;
  };
  const onClose = () => {
    visible.value = false;
  };
  
  defineExpose({
    onOpen,
    onClose,
  });
  

  那么在父組件中，我們只需要通過ref得到該組件Dom，然后操作Dom內(nèi)部的方法即可；

  如：父組件改寫

  
  
  // 轉(zhuǎn)讓管理員組件
  import ExchangeValidModalVue from './modal/ExchangeValidModal.vue';
  // modal彈層
  const exchangeRef = ref(null); // 轉(zhuǎn)讓管理員可視化
  const onExchangeOpen = () => {
     exchangeRef.onOpen() // 直接操作dom里defineExpose暴露出來的方法
  };
  

  如此，是不是比父子單向數(shù)據(jù)傳遞的方式更加高效易用？當然上面所說的只是我舉的一個例子，當后續(xù)需要在組件內(nèi)擴展功能也可按類似的方法代替單向數(shù)據(jù)流的方式擴展

  但，請注意；這種操作dom方式，并不是什么場景下都是最佳的選擇；我們可以分情況選擇，比如當一些數(shù)據(jù)只需要在子組件的范疇中實現(xiàn)，而不需要父組件外加干涉的情況下，選擇ref操作dom更為高效；

  補充知識點：

  defineExpose

  在 Vue3.2 中，默認不會暴露任何在