混入组件 (mixin)

1 什么是混入以及作用

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

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

2 mixins混入的使用

简易版

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

home.js文件

export default{
    data(){
        return{
            usename:'我是minxi的属性'
        }
    },
    methods: {
    chageName(){
    this.usename+='的'//userName会被父组件的覆盖
    this.chageAge()
    }
    },
}

引入mixin.js的home.vue页面

<template>
  <div class="home">
    <div> 组件测试页面</div>
    <div @click="chageName">{{ usename }}</div>
    <div @click="changeAge">{{ age }}</div>
  </div>
</template>
<script>
import tetxMinxin from '../mixins/home'
export default {
  mixins: [tetxMinxin],
  data() {
    return {
      age: 18,
      usename: '454545'
    }
  },
  mounted(){
    this.changeName();
  },
  methods:{
    // 年龄转换计算
    changeAge(){
      this.age ++
    }
  }
}
</script>

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