在Vuejs中使用mixins

我目前正在学习如何使用Vuejs开发一个应用程序。我有一个main.js文件，其中包含用于设置Vue.js的代码。我用一个新文件api.j创建了一个新目录/ mixins。我想用它作为mixin，以便每个组件都可以使用一个函数来访问我的api。但我不知道该怎么做。在Vuejs中使用mixins

这是我/mixins/api.js文件：

export default{ 
    callapi() { 
    alert('code to call an api'); 
    }, 
};

这是我main.js文件：

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');

我怎么能现在包括我的混入正确的方式，让每一个组件都有访问callapi()功能？

来源

2016-09-06 Jordy

您可以在全球使用Vue.mixin

api.js 
------ 

export default { 
    methods: { 
    callapi() {}; 
    } 
} 

main.js 
------- 

import CallAPI from './mixins/api.js'; 

Vue.mixin(CallAPI)

由于documentation说你就应该小心使用适用的mixin：人烟稀少，仔细

使用全局混入，因为它会影响创建的每一个Vue的情况下，包括第三方组件。

来源

2016-09-07 06:01:02 pkawiak

如果你想使用一个特定组件一个mixin，而不是所有的组件，你可以做这样的：

mixin.js

export default { 
    methods: { 
    myMethod() { .. } 
    } 
}

组件.vue

import mixin from 'mixin'; 

export default { 
    mixins: [ mixin ] 
}

您可能会考虑的另一件事是使用组件扩展设计模式，即创建一个基本组件，然后从子组件中继承。如果你有很多组件共享很多选项，并且可能也继承了模板，那么它会让代码变得更干。

我写过关于它on my blog如果你有兴趣。

来源

2017-06-15 16:09:32 anthonygore

在Vuejs中使用mixins

回答

相关问题