混入:mixins
一種分發Vue組件中可反復使用的功能的方法。
混入對象可以:包含任意組件選項。
混入對象的選項將被混入該組件本身的選項。
- 如果有同名選項,在和組件的數據發生沖突時,組件數據優先。混入數據被丟棄。
全局混入:Vue.minin({...}) ⚠️謹慎使用。
會影響到每個單獨創建的Vue實例。
// 為自定義的選項 'myOption' 注入一個處理器。
// created是實例初始化后的鈎子:
Vue.mixin({
created: function () {
var myOption = this.$options.myOption #$options得到所有選項。
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!' # 這是給實例的自定義屬性
})
// => "hello!
選項/組合
mixins: [object]
接受一個混入對象的數組。
比如聲明一個變量hook,這個變量是一個鈎子方法。通過minins: [hook], 可以把這個變量hook放入new Vue({})中。
extends:Object | Function
用於聲明擴展另一個組件。無需使用Vue.extend。主要為了方便擴展單文件組件xxx.vue
例子:
var CompA = { ... } #一個對象
var CompB = { #在沒有調用 Vue.extends的時候繼承 CompA
extends: CompA, ...
}
全局API
Vue.extend(options),
用基礎構造器,創建一個‘子類’。這個類被實例化后就是一個Vue實例。但沒有掛載.
options是 {object}, 組件選項
- data: function() { return ... }
- template: '<p>...</p>'
例子:
var Profile = Vue.extend({ ...}) #創建構造器
new Profile().$mount("#元素🆔") #創建Profile實例,掛載到一個元素上。
new Profile({ el: '#元素🆔'}) #等同於加上el選項。
new Profile().$mount() #沒加參數,相當於新建了一組元素。尚未插入到DOM文檔.
實例方法/生命周期
vm.$mount([element或者Selector])
如果Vue實例在實例化的時候沒有收到el選項,則它處於未掛載狀態,沒有關聯DOM元素。
使用$mount()手動掛載到一個元素上。
返回: 實例本身。所以可以用鏈式調用其他實例方法。
實例屬性
vm.$options 得到所有選項。