Vue 3-Vorlagenreferenzen in Composables
P粉153503989
P粉153503989 2023-12-22 22:57:26
0
1
512

Ich möchte von der Options-API zur Kompositions-API wechseln und Composables anstelle von Mixins verwenden. Bisher habe ich ein globales Mixin mit berechneten Eigenschaften wie diesem verwendet:

// globalMixin.js

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

Dann habe ich beim Erstellen der App dieses Mixin verwendet:

// MyApp.js

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

myAlert wird zu einer berechneten Eigenschaft von MyApp und ich kann es verwenden, ohne es direkt in der MyApp-Eigenschaft zu deklarieren.

Jetzt möchte ich mit Composables das gleiche Ergebnis erzielen. Nehmen wir an, ich habe eine Komponente, die Composables importiert:

// 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>

Ist es in Ordnung? Wenn ja, wie soll ich die myAlert-Vorlagenreferenz im Composable deklarieren?

P粉153503989
P粉153503989

Antworte allen(1)
P粉658954914

您的 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>
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!