Vue mixins配置项

mixin

mixin是vm对象的配置项，mixin的值是一个数组

使用场合：当我们的多个组件中同时需要一个变量或者方法的时候，可以在外部创建一个 js文件，然后在组件中导入，在mixin配置项中填入

案例解析

【例子】

School.vue

<template>
  <div>
      <hr>
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    data(){
        return{
            name:"清华",
            address:"北大"
        }
    },
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
</script>

Student.vue

<template>
    <div>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name:"张三",
            age:18
        }
    },
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
</script>

我们发现这两段vue有相同的代码——showName函数，那么我们就可以使用mixin配置项进行解决代码重复的问题

解决方法：

model.js

export const a = {
    methods: {
        showName(){
            alert(this.name)
        }
    }
}

School.vue

只展示改变的地方

<template>
      <h2 @click="showName">学校名称：{{name}}</h2>
</template>

<script>
import { a } from '../model'
export default {
    data(){
        return{
            name:"清华",
            address:"北大"
        }
    },
    mixins:[a]
}
</script>

Student.vue

只展示改变的地方

<template>
	<h2 @click="showName">学生姓名：{{name}}</h2>
</template>

<script>
import {a} from "../model"
export default {
    data() {
        return {
            name:"张三",
            age:18
        }
    },
    mixins:[a]
}
</script>

使用混入

1. 全局混入：Vue.mixin(xxx)
2. 局部混入：mixin[xxx]

数据重合注意

我们在外部js中可以写Vue对象中的所有配置项，那么就会出现配置项中的数据重合问题

data数据重合——以原有的数据(vue组件中的data数据)为准

methods方法重合——以mixins内的为准

生命周期函数重合——互不冲突，一起触发