在Vue.js中,我們可以使用extend方法和mixin混合對象來擴展組件。extend方法允許我們創建一個組件類,然后通過該類創建實例。這樣,我們就可以定義一些通用的組件類,然后在需要的時候使用它們來創建新的組件實例。
而Mixin混入更加靈活,它允許我們將一些通用的組件功能定義在一個混合對象中,然后將其混入到需要這些功能的組件中。在Vue.js中,我們可以通過mixins選項來引入一個或多個需要的混入對象。
Vue.mixin({ created: function() { console.log('global mixin created'); } }); new Vue({ created: function() { console.log('local mixin created'); } });
這段代碼定義了一個全局的混入對象,它包含了created鉤子函數,該函數會在組件創建并掛載之后被調用。在組件內部的created鉤子函數也是同樣的道理,但它們優先于全局混入對象。
除了如上使用方案,還可以使用對象合并的方式將多個混入對象合并成一個新的對象,從而定義新的組件類。
var myMixin = { created: function() { this.hello(); }, methods: { hello: function() { console.log('hello from mixin!'); } } }; var Component = Vue.extend({ mixins: [myMixin], created: function() { console.log('component created'); } }); new Component();
這段代碼中,我們定義了一個名為myMixin的混入對象,它包含了一個方法hello。然后我們通過extend方法創建了一個組件類Component,并將myMixin混入到組件類中。最后,我們創建了一個Component實例,并通過瀏覽器控制臺查看了輸出。
上一篇vue做餅圖