Vue 中mixin 的用法詳解

e中提供了一種混合機制--mixins，用來更高效的實現組件內容的複用。這篇文章主要介紹了Vue mixin 的用法,很是不錯，具備參考借鑑價值，須要的朋友能夠參考下

說下我對vue中mixin的一點理解

　　vue中提供了一種混合機制--mixins，用來更高效的實現組件內容的複用。最開始我一度認爲這個和組件好像沒啥區別。。後來發現錯了。下面咱們來看看mixins和普通狀況下引入組件有什麼區別？

     組件在引用以後至關於在父組件內開闢了一塊單獨的空間，來根據父組件props過來的值進行相應的操做，單本質上二者仍是涇渭分明，相對獨立。

     而mixins則是在引入組件以後，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合併。至關於在引入後，父組件的各類屬性方法都被擴充了。

     單純組件引用：

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

     mixins：

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

做用：多個組件能夠共享數據和方法，在使用mixin的組件中引入後，mixin中的方法和屬性也就併入到該組件中，能夠直接使用。鉤子函數會兩個都被調用，mixin中的鉤子首先執行。

下面給你們介紹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]
}

 

本文轉自：https://www.jb51.net/article/138757.htm