在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

回答

相關問題