Références de modèles Vue 3 dans les composables

Question

Je souhaite passer de l'API d'options à l'API de composition et utiliser des composables au lieu de mixins. Jusqu'à présent, j'ai utilisé un mixin global avec des propriétés calculées comme ceci : //globalMixin.jscomputed:{myAlert(){returnthis.$refs.myAlertDiv;}} Ensuite, j'ai utilisé ce mixin lors de la création de l'application ://MyApp.jsconstMyApp ={mixins:[globalMixin]...}mon

P粉658954914 · Answer

Votre useGlobalComposable 函数应返回 myAlert, comme indiqué ci-dessous :

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

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

   return {myAlert}
  }

Ensuite, vous pouvez déclarer myAlert dans le bloc des paramètres

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

Veuillez noter que mixin 中的 this.$refs 不能直接与 Composition API 一起使用。如果您创建组件，则可以使用 this accède aux propriétés et méthodes des composants.

Ceci est un article sur l'utilisation de refs avec l'API Composition.

Exemple de travail très simple utilisant des composables dans 设置 :

 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')


  Test: {{ test }}