我已经编写了一些我想在我的vue.js项目的app.js / main.js文件中导入的JS类,以便我可以在组件中实例化它们。现在我必须在我需要单独的类的所有组件中导入相同的JS类。
我已尝试在main.js文件中导入,但组件无法识别它。
在main.js文件中,我导入如下
import Permissions from './Permissions'
但是,当我想在我的组件中实例化Permissions类时
data() {
permissions: new Permission({
some object properties...
})
}
该组件不知道Permissions
是什么。
如何让组件知道Permissions
类是什么?
要以vue方式执行此操作,您可以创建自己的插件或mixin。查看详细说明here
因此,您可以在permissions-plugin.js中创建权限插件
import Permissions from './Permissions'
const PermissionsPlugin = {
install(Vue, options) {
// This adds the $getPermissions method to all instances
Vue.prototype.$getPermissions = function(properties) {
return new Permission({
some object properties...
})
}
}
};
然后你必须告诉vue使用你的插件:
import Vue from 'vue'
import PermissionsPlugin from './permissions-plugin.js'
import App from './App.vue'
// The plugin is loaded here.
Vue.use(PermissionsPlugin)
new Vue({
el: '#app',
render: h => h(App)
});
最后,现在从任何组件,你应该能够使用你的功能,如:
this.$getPermissions(properties)