我目前正在学习如何使用 Vuejs 开发应用程序。我有一个 main.js 文件,其中包含用于设置 Vue.js 的代码。我使用新文件 api.js 创建了一个新目录 /mixins。我想将其用作 mixin,以便每个组件都可以使用函数来访问我的 api。但我不知道该怎么做。
这是我的/mixins/api.js
file:
export default{
callapi() {
alert('code to call an api');
},
};
这是我的main.js
file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import { configRouter } from './routeconfig';
import CallAPI from './mixins/api.js';
// Register to vue
Vue.use(VueResource);
Vue.use(VueRouter);
// Create Router
const router = new VueRouter({
history: true,
saveScrollPosition: true,
});
// Configure router
configRouter(router);
// Go!
const App = Vue.extend(
require('./components/app.vue')
);
router.start(App, '#app');
现在我怎样才能以正确的方式包含我的 mixin,以便每个组件都可以访问callapi()
功能?
如果你想在specific组件,而不是所有组件,您可以这样做:
mixin.js
export default {
methods: {
myMethod() { .. }
}
}
组件.vue
import mixin from 'mixin';
export default {
mixins: [ mixin ]
}
您可能考虑的另一件事是使用组件扩展设计模式,即创建一个基本组件,然后在子组件中继承该组件。如果您有许多组件共享许多选项并且可能也继承模板,那么它会涉及更多一些,但可以保持代码干燥。
我已经写过相关内容在我的博客上 http://vuejsdevelopers.com/2017/06/11/vue-js-extending-components/如果你有兴趣的话。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)