Vue 混入 mixins

mixins 概念 官方網址

官方是這樣說的: 混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項
個人理解: mixins 類似函數封裝, 將可複用的功能抽離,可以提取出來單個文件來封裝函數

基本使用

1. 創建混入對象, mixins 是一個對象, 我們可以新建一個文件來處理 mixins/mymixins.js

const mymixins = {
  data(){
    return {
      value:"我是mixins中的data"
    }
  },
  components:{
  },
  created(){
    console.log("mixins中的created")
  },
  methods:{
    btnenent(){
      console.log(this.value)
      this.compmethods() // mixins 中可以訪問到 組件中的屬性
    }
  },
  watch:{
    value(){
      console.log("mixins中的watch")
    }
  }
}
export default mymixins

2. 組件中引入使用

<template>
  <div>
    <button @click="this.btnenent">點我</button>
  </div>
</template>
<script>
import mymixins from "../mixins/mymixins";
export default {
  data(){
    return {
      // mixins 和 組件內部有相同鍵值的 data, 會讀取組件中的 data
      value:"我是組件中的data"
    }
  },
  components:{
  },
  mixins: [mymixins], // 註冊mixins,他是一個數組,可以定義多個 mixins 註冊到組件裏面 
  created(){
    //鉤子函數: 先調用 mixins中的方法, 然後調用 組件內部的方法
    console.log("組件中的created")
  },
  //值爲對象的混入: 如methods components watch 等內部有相同的值, 組件對象會覆蓋混入對象
  methods:{
   // btnenent(){ 
   //   console.log("組件中的btnenent")
   // },
    compmethods(){
      console.log("我是組件中的方法 mixins 中可以訪問到此方法")
    }
  },
  watch:{
    value(){
      console.log("組件中的watch")
    }
  }
}
</script>

使用mixins需要注意的點:

1. mixins 和 組件內部有相同鍵值的 data, 會讀取組件中的 data
2. 鉤子函數: 先調用 mixins中的方法, 然後調用 組件內部的方法
3. 值爲對象的混入: 如methods components watch 等內部有相同的值, 組件對象會覆蓋混入對象