可組合項目中的 Vue 3 範本引用

Question

我想從選項 API 切換到組合 API，並使用可組合項目來取代 mixin。到目前為止，我一直在使用具有計算屬性的全域 mixin，如下所示：

// globalMixin.js

 computed: {
    myAlert() {
        return this.$refs.myAlertDiv;
    }
 }

然後我在建立應用程式時使用了這個mixin：

// MyApp.js

const MyApp = {
   mixins: [globalMixin]
...
}

myAlert 成為 MyApp 的計算屬性，我可以使用它而無需直接在 MyApp 屬性內聲明。

現在我想使用可組合項目來實現相同的結果，假設我有一個導入可組合項目的元件：

// App.vue

<script setup>
import { useGlobalComposable} from './globalComposable.js';

const globalComposable = useGlobalComposable();

onMounted(() => {

// should work without declaring myAlert inside App.vue
console.log(globalComposable.myAlert);
})
...
</script>

可以嗎？如果是這樣，我應該如何在可組合項目中聲明 myAlert 模板引用？

Answer 1

您的 useGlobalComposable 函數應傳回 myAlert，如下：

const useGlobalComposable = function() { 
  
   const myAlertDiv = ....

   const myAlert = computed(() => {
        return myAlertDiv;
    });

   return {myAlert}
  }

然後您可以在設定區塊中宣告 myAlert

const { myAlert } = useComposable();   
 return { myAlert }

請注意，mixin 中的 this.$refs 不能直接與 Composition API 一起使用。如果您建立元件，則可以使用 this 存取元件屬性和方法。

這是一篇關於將 refs 與 Composition API 結合使用。

在設定中使用可組合項目的非常簡單的工作範例：

 const { ref, reactive, createApp } = Vue;
 
 const useComposable = function() { 
  const test = ref(1);
  return { test }; 
 }
 
 const App = { 
   setup() {    
      const { test } = useComposable();   
      return { test }
   }
}
 
 const app = createApp(App)
 app.mount('#app')

<div id="app">
  <div>Test: {{ test }}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>