vue中mixins（混入）的使用

1.什么是混入以及作用

*混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

作用：主要作用是继承和封装，将一些公共的代码抽离，可以减少代码量，提高复用性*

2.mixins混入的使用

首先在src下创建一个mixins文件夹，再新建一个js文件

mixin.js文件

export const mixin = {
  data () {
    return {
      name: '土豆',
      age: 18,
      data: []
    }
  },
  methods: {
    changeName () {
      this.name = '马铃薯'
      console.log(this.name, '我是mixin')
    },
    changeData () {
      this.data.push('牛逼')
      console.log(this.data, 'data')
    }
  },
  mounted () {
    console.log('mixin')
  }
}

引入mixin.js的index.vue页面

<script>
import { mixin } from '@/mixins/mixin'
export default {
  mixins: [mixin],
  data () {
    return {
    }
  },
  methods: {
    // 跟mixin的方法同名
    changeName () {
      this.name = '马铃薯2'
      console.log(this.name, '我是index页面')
    },
    changeAge () {
      this.age = 20
      console.log(this.age, 'index的age')
    }
  },
  mounted () {
    console.log(this.age, 'mixin的age数据')
    console.log(this.name, 'mixin的name数据')
    this.changeData()
    this.changeName()
    this.changeAge()
    console.log('index')
  }
}
</script>

混入之后实际页面状态

<script>
export default {
  data () {
    return {
      name: '土豆',
      age: 18,
      data: []
    }
  },
  methods: {
    // index没有的方法会新增过来，并且先执行
    changeData () {
      this.data.push('牛逼')
      console.log(this.data, 'mixin的data')
    },
    // 跟mixin的方法同名，会覆盖mixin的方法
    changeName () {
      this.name = '马铃薯2'
      console.log(this.name, '我是index页面')
    },
    changeAge () {
      this.age = 20
      console.log(this.age, 'index的age')
    }
  },
  mounted () {
    console.log('mixin')
    console.log(this.age, 'mixin的age数据')
    console.log(this.name, 'mixin的name数据')
    this.changeData()
    this.changeName()
    this.changeAge()
    console.log('index')
  }
}
</script>

总结： mixin内的方法，先执行mixin内的方法，如果方法名/属性名重复，mixin的会被覆盖！！