vue中mixin和元件的區別是什麼

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

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

什麼是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和元件的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！