沐鳴登錄網站_如何在Vue 中管理 Mixins

沐鳴註冊網站

當我們的vue項目功能越來越多時，如果有類似的組件，可能會發現自己一次又一次地複製和粘貼相同的數據、方法和 watch。當然，我們可以將所有這些單獨的文件編寫為一個單獨的組件，並使用 prop 來嘗試自定義它們，但是使用這麼多 props 很容易造成混亂且難懂。為了避免這個問題，大多數人只是繼續添加重複的代碼，儘管自己感覺應該有更好的解決方案。

值得慶幸的是，vue 引入mixin來解決這類的總是，mixin是在不同組件之間共享可重用代碼的最簡單方法之一。Mixin 對象可以使用任何組件選項如 data、mounted、created、update等，當組件使用 Mixin 時，Mixin 對象中的所有信息都將混合到組件中。然後，組件將有權訪問mixin中的所有選項，就像在組件本身中聲明的那樣。接着，我們通過示例來幫助加深一下映像：

// mixin.js file
export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log('這裏由 mixin 中 create 方法打印！')
   },
   methods: {
      displayMessage: function () {
         console.log(‘這裏由 mixin 方法里打印！’)
      }
   }
}

// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "這裏由 mixin 中 create 方法打印！"
// => {msg: ‘Hello World’}
// => "這裏由 mixin 方法里打印！"

正如我們所看到的，在使用mixin之後，該組件包含mixin中的所有數據，並且可以通過使用this來訪問mxin中的數據和方法。我們還可以使用變量而不是單獨的文件來定義mixin。 坦白地說，這是我們需要了解的大多數關於mixin的知識，但是我認為了解某些用例和特殊情況很有用。

如果發生命名衝突該怎麼辦？

當mixin中的數據、方法或任何組件選項與組件中的選項具有相同的名稱時，可能會發生組件與其mixin之間的命名衝突。如果發生這種情況，則組件本身的屬性將優先。例如，如果在組件和mixin中都有一個title數據變量。title將返回組件中定義的值，如下所示：

// mixin.js file
export default {
   data () {
      title: ‘Mixin’
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"

總結

一般來說，對於Vue 的 mixin，我們還有很多要了解，，但是上面這些知識在開發中一般足夠用了。如果你想了解更高級的主題，比如Vue中的全局mixin和自定義合併設置，可以在 Vue文檔中找到這些信息。

原文：https://levelup.gitconnected.com/

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8870