vue中mixin和組件的區別有哪些

這篇文章主要介紹“vue中mixin和組件的區別有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中mixin和組件的區別有哪些”文章能幫助大家解決問題。

mixin和組件的區別：組件在引用之后相當于在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立；而mixins在引入組件之后相當于父組件的各種屬性方法都被擴充了，會將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。

什么是Mixin？

混合 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。

混合對象可以包含任意組件選項。

當組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。

mixin和組件的區別

組件在引用之后相當于在父組件內開辟了一塊單獨的空間，來根據父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。

而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。

單純組件引用：

• 父組件 + 子組件 >>> 父組件 + 子組件

mixins：

• 父組件 + 子組件 >>> new父組件

有點像注冊了一個vue的公共方法，可以綁定在多個組件或者多個Vue對象實例中使用。另一點，類似于在原型對象中注冊方法，實例對象即組件或者Vue實例對象中，仍然可以定義相同函數名的方法進行覆蓋，有點像子類和父類的感覺。

mixins和vuex區別

Mixins：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響。如果相同對象，組件會覆蓋mixins

vuex：用來做狀態管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。

mixins的使用

1、首先創建一個js文件，例如elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 顯示頁面中所有內容
    handleCount() {
      this.count++
  }
}

或者

// 定義一個混入對象
    var myMixin = {
        data(){
            return{
                parent: 405
            }
        },
        mounted: function () {
            this.hello()
        },
        methods: {
            hello: function () {
                console.log(this.parent, 'hello from mixin!')
            }
        }
    }

2、然后在需要此需求的vue頁面引入并且使用

<el-button type="primary" @click="handleCount">{{count}}</el-button>
 
import { elTableAdsorbent } from '@/utils/mixin/elTableAdsorbent'
 
export default {
  mixins: [elTableAdsorbent],
  data() {
    return {}
  },
  created(){},
  methods:{}, 
  watch:{}
}

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

var mixin = {
  created: function () {
    console.log('混入對象的鉤子被調用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('組件鉤子被調用')
  }
})

// => "混入對象的鉤子被調用"
// => "組件鉤子被調用"

4、兩個對象鍵名沖突時，取組件對象的鍵值對。

var mixin = {
  methods: {
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.conflicting() // => "from self"

mixins的應用

var install = function (Vue, options) {
  // 1. 添加全局方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }
  // 2. 添加全局資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  // 3. 注入組件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })
  // 4. 添加實例方法
  Vue.prototype.$myMethod = function (options) {
    // 邏輯...
  }
}

關于“vue中mixin和組件的區別有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。