快捷導(dǎo)航

Vue中的混入的使用(vue mixins)

更新時間：2018年06月01日 11:29:14 作者：Brighten_Sun

這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

使用場景：

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

選項合并

      var mixin = {
        data: function () {
        return {
         message: 'hello'
        }
       },
       created:function(){
        console.log('我是mixins中的created')
       },
       methods:{
        show:function(num){
          console.log(num) //mixins種的函數(shù)可以接收組件種的傳參。
        },
        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); //可通過函數(shù)傳參,把組件中需要的參數(shù)傳給mixins進行使用。
       },
       methods:{
        bar: function () {
         console.log('bar')
        },
        conflicting: function () {
         console.log('from self')
        }
       }
      })
      
      vm.foo() // => "foo"
      vm.bar() // => "bar"
      vm.conflicting() // => "from self"

注意以下三點：

1、當(dāng)組件和混入對象含有同名選項時，這些選項將以恰當(dāng)?shù)姆绞交旌?。比如，?shù)據(jù)對象在內(nèi)部會進行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。

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

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

全局混入

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: