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 等内部有相同的值, 组件对象会覆盖混入对象