vue.js Quasar的全局变量和函数

luaexgnf  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(353)

我一直在寻找正确的方法来全局使用一些变量、实用函数和可组合项。我想避免在每个组件、页面等中导入这些。
是否有全局定义组件的技术?(例如:app.component(“gCompShowError”,gCompShowError);这可能是一个愚蠢的问题,但我很感激每一个提示。

2sbarzqh

2sbarzqh1#

由于Vue 3引入了composition API,因此setup函数中没有this关键字。因此,将函数或变量绑定到Vue.prototypeapp.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接口中使用。

// Register global functions
app.config.globalProperties.$MyFunction = () => console.log('my custom fn');

稍后,您可以在Vue选项API组件中使用$MyFunction

<template>
 <my-component/>
</template>

<script>
export default {
  mounted() {
    this.$MyFunction();
  }
}
</script>

It turned out,组合API比旧的Options API更具可读性,可维护性和可扩展性。组件或可组合函数所依赖的所有依赖项都可以通过查看导入而显而易见。
在这种情况下,如果你想减少导入行,你可以在根目录的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提供了编写可维护代码的更好方法。

相关问题