這篇文章主要介紹了vue.mixin的使用方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)10多年企業(yè)網(wǎng)站設(shè)計服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站設(shè)計及推廣,對成都廣告推廣等多個領(lǐng)域擁有多年建站經(jīng)驗的網(wǎng)站建設(shè)公司。

vue.mixin的使用方法：1、多個組件可以共享數(shù)據(jù)和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就并入到該組件中，可以直接使用；2、鉤子函數(shù)會兩個都被調(diào)用，mixin中的鉤子首先執(zhí)行。

vue.mixin的使用方法：

vue中提供了一種混合機制--mixins，用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用。最開始我一度認(rèn)為這個和組件好像沒啥區(qū)別。。后來發(fā)現(xiàn)錯了。下面我們來看看mixins和普通情況下引入組件有什么區(qū)別？

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

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

單純組件引用：

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

mixins：

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

作用：多個組件可以共享數(shù)據(jù)和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數(shù)會兩個都被調(diào)用，mixin中的鉤子首先執(zhí)行。

下面給大家介紹vue mixin的用法，具體介紹如下所示：

1、定義一個 js 文件(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2、在vue文件中使用mixin

import mixin from '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue.mixin的使用方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!

當(dāng)前文章：vue.mixin的使用方法-創(chuàng)新互聯(lián)
分享路徑：http://weahome.cn/article/dgihdg.html