我一直在寻找正确的方法来全局使用一些变量、实用函数和可组合项。我想避免在每个组件、页面等中导入这些。是否有全局定义组件的技术?(例如:app.component(“gCompShowError”,gCompShowError);这可能是一个愚蠢的问题,但我很感激每一个提示。
2sbarzqh1#
由于Vue 3引入了composition API,因此setup函数中没有this关键字。因此,将函数或变量绑定到Vue.prototype或app.config.globalProperties中以在应用程序中全局共享公共功能是没有用的。但是,定义全局组件可以正常工作。
setup
this
Vue.prototype
app.config.globalProperties
import { createApp } from 'vue' import { App } from './App.vue' import MyComponent from './components/MyComponent.vue' let app = createApp(App) // Register global components app.component('MyComponent', MyComponent); app.mount('#app')
要定义global functions(使用mixins或插件),您应该使用Options接口。所有Vue 2练习也可以在v3 Options接口中使用。
Options
// Register global functions app.config.globalProperties.$MyFunction = () => console.log('my custom fn');
稍后,您可以在Vue选项API组件中使用$MyFunction:
$MyFunction
<template> <my-component/> </template> <script> export default { mounted() { this.$MyFunction(); } } </script>
It turned out,组合API比旧的Options API更具可读性,可维护性和可扩展性。组件或可组合函数所依赖的所有依赖项都可以通过查看导入而显而易见。在这种情况下,如果你想减少导入行,你可以在根目录的index.js中重新导出复合函数。
index.js
src -- composable ---- index.js ---- use-comp-1.js ---- use-comp-2.js -- pages ---- HomePage.vue
// src/composable/use-comp-1.js export function useComp1() { return 1; } // src/composable/use-comp-2.js export function useComp2() { return 2; } // src/composable/index.js export { useComp1 } from 'src/composable/use-comp-1'; export { useComp2 } from 'src/composable/use-comp-2'; // HomePage.Vue <script setup> import { useComp1, useComp2 } from 'src/composable'; const a1 = useComp1(); const a2 = useComp2(); </script>
如果setup函数中没有this关键字,则无法使用全局函数。另一方面,组合API提供了编写可维护代码的更好方法。
1条答案
按热度按时间2sbarzqh1#
由于Vue 3引入了composition API,因此
setup
函数中没有this
关键字。因此,将函数或变量绑定到Vue.prototype
或app.config.globalProperties
中以在应用程序中全局共享公共功能是没有用的。但是,定义全局组件可以正常工作。要定义global functions(使用mixins或插件),您应该使用
Options
接口。所有Vue 2练习也可以在v3 Options接口中使用。稍后,您可以在Vue选项API组件中使用
$MyFunction
:It turned out,组合API比旧的Options API更具可读性,可维护性和可扩展性。组件或可组合函数所依赖的所有依赖项都可以通过查看导入而显而易见。
在这种情况下,如果你想减少导入行,你可以在根目录的
index.js
中重新导出复合函数。摘要
如果setup函数中没有
this
关键字,则无法使用全局函数。另一方面,组合API提供了编写可维护代码的更好方法。