Vue中如何使用vue mixins

這篇文章主要介紹了Vue中如何使用vue mixins，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用場景：

例如我們在Vue單頁面開發的時候當多個組件中都需要下拉刷新，或者使用的都是一個方法的時候，我們就可以使用vue mixins進行封裝調用，以及繼承，具體看代碼。

選項合并

  var mixin = {
        data: function () {
        return {
         message: 'hello'
        }
       },
       created:function(){
        console.log('我是mixins中的created')
       },
       methods:{
        show:function(num){
          console.log(num) //mixins種的函數可以接收組件種的傳參。
        },
        foo: function () {
         console.log('foo')
        },
        conflicting: function () {
         console.log('from mixin')
        }
       }
      }

      var vm = new Vue({
       mixins: [mixin],
       data: function () {
        return {
         title: 'def',
         message: 'goodbye'
        }
       },
       created: function () {
        console.log('我是Vue中的created')
        console.log(this.$data)
        this.show(50); //可通過函數傳參,把組件中需要的參數傳給mixins進行使用。
       },
       methods:{
        bar: function () {
         console.log('bar')
        },
        conflicting: function () {
         console.log('from self')
        }
       }
      })
      
      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

注意以下三點：

1、當組件和混入對象含有同名選項時，這些選項將以恰當的方式混合。比如，數據對象在內部會進行淺合并 (一層屬性深度)，在和組件的數據發生沖突時以組件數據優先。

2、同名鉤子函數將混合為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。

3、值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

全局混入

也可以全局注冊混入對象。注意使用！ 一旦使用全局混入對象，將會影響到 所有 之后創建的 Vue 實例。使用恰當時，可以為自定義對象注入處理邏輯。

//為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue中如何使用vue mixins”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!