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?
您的
useGlobalComposable
函数应返回myAlert
,如下所示:然后您可以在设置块中声明 myAlert
请注意,
mixin
中的this.$refs
不能直接与 Composition API 一起使用。如果您创建组件,则可以使用this
访问组件属性和方法。这是一篇关于将
refs
与 Composition API 结合使用。在
设置
中使用可组合项的非常简单的工作示例: