vue.js 混入


混入: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  得到所有選項。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM