在使用Vue.js時,我們經常會遇到一個問題,就是需要引入Vue組件或插件時,在組件或插件內部引入Vue時需要使用default屬性。那么,為什么我們需要使用Vue.default屬性呢?
首先,我們先看一下Vue.js的代碼結構:
// vue.js
// ...
function initGlobalAPI(Vue) {
// ...
}
var exported = {
init: initMixin,
stateMixin: stateMixin,
renderMixin: renderMixin,
eventsMixin: eventsMixin,
lifecycleMixin: lifecycleMixin,
install: install,
$: $
};
Vue.version = '2.0.2';
Vue.default = exported;
module.exports = exported;
我們可以發現,在Vue.js中,Vue.default指向了一個exported對象,同時也把這個對象導出到了module.exports中。這就是為什么我們在組件內引入Vue時需要使用default屬性的原因。
因為Vue.js將Vue對象包裝在了一個exported對象中,但是我們在組件內引入時,需要的是Vue對象,而不是Vue.default(也就是exported對象)。因此,我們需要在引入時指定使用Vue對象的default屬性,才能夠正確地引用Vue.js。