vue中mixin和組件的區(qū)別有哪些

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

為淇縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及淇縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站制作、淇縣網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

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

什么是Mixin？

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

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

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

mixin和組件的區(qū)別

組件在引用之后相當(dāng)于在父組件內(nèi)開辟了一塊單獨(dú)的空間，來根據(jù)父組件props過來的值進(jìn)行相應(yīng)的操作，單本質(zhì)上兩者還是涇渭分明，相對獨(dú)立。

而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應(yīng)內(nèi)容進(jìn)行合并。相當(dāng)于在引入后，父組件的各種屬性方法都被擴(kuò)充了。

單純組件引用：

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

mixins：

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

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

mixins和vuex區(qū)別

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

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

mixins的使用

1、首先創(chuàng)建一個js文件，例如elTableAdsorbent.js

export const elTableAdsorbent = {
  data() {
    return {
      count:10
    }
  },
  methods: {
    // 顯示頁面中所有內(nèi)容
    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、同名鉤子函數(shù)將合并為一個數(shù)組，因此都將被調(diào)用。另外，混入對象的鉤子將在組件自身鉤子之前調(diào)用。

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

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

// => "混入對象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"

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的應(yīng)用

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

關(guān)于“vue中mixin和組件的區(qū)別有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

新聞名稱：vue中mixin和組件的區(qū)別有哪些
文章分享：http://muchs.cn/article42/gpghhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、App設(shè)計、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容