Vue的mixins（混入）机制使用

1、什么是mixins（混入）：
mixins是vue提供的一种混入机制（可以直接在Vue里面使用，不用额外安装什么依赖），能够更好地实现组件功能复用，混入对象（mixins）可以包含任意组件选项（data、created、mounted、methods、computed、filter等），组件引入mixins后，相关选项会进行合并，相当于引入后，父组件各属性和方法进行了扩充。
2、关键点：
① 组件在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖（即组件和封装的mixin文件里面如果定义相同属性，以父组件为准）
② 在封装的mixins文件里面可以直接调用父组件的属性和方法
3、代码实践：
① 组件代码

<template>
  <div id="">
    <div>组件测试页面</div>
    <br>
    <div>
      {{userName}}:{{age}}
    </div>
  </div>
</template>

<script>
  import textMixin from './js/text_mixin.js'//导入混合机制文件
  export default{
    mixins:[textMixin],//声明 混入
    data(){
      return{
        age: 18,
        userName:"我是组件属性"
      }
    },
    mounted() {
      this.changeName();
    },
    methods:{
      //年龄转换计算
      changeAge(){
        this.age *= 2;//翻倍
      },
    }
  }
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

②、封装的mixin代码

export default {
  data(){
    return{
      userName: "我是mixin里属性"
    }
  },
  methods:{
    //名称加后缀
    changeName(){
      this.userName += '的';//userName会被父组件的覆盖
      this.changeAge();//调用父组件定义的方法
    }
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结：比如有个方法功能有多个页面要引用到，这个时候使用mixins混入，可以很好地解决功能拓展的方便以及复用性。