vue中的混入

在开发过程中,可能会发生同一个内容在很多个组件中都有使用的情况,而在每个组件中单独编写内容既费时也不好维护,所以vue提供了一个配置项来解决这一问题,也就是mixin配置项.

本文将简述mixin的使用方法

新建一个项目后,准备2个新组件

组件1:

<template>
    <div class="student">
        <h2 @click="showName">学生姓名:{{name}}</h2>
        <h2>学生年龄:{{age}}</h2>
    </div>
</template>


<script>
    export default {
        name:'my-student',
        data(){
            return {
                msg:'我是名学生',
                age:30,
                name:'张三',
            }
        },
        methods:{
            showName(){
                alert(this.name);
            }
        },
    }
    
</script>

组件2:

<template>
    <div class="demo">
        <h2 @click="showName">学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>


<script>
    export default {
        name:'my-school',
        data(){
            return {
                msg:'我是一所学校',
                name:'育才中学',
                address:'beijing'
            }
        },
        methods: {
            showName(){
                alert(this.name);
            },
        },
    }
    
</script>

在上述两个组件中,有相同的methods,则可以将它们放到一个专门的文件中

下面开始介绍用法

第一步:

新建一个.js文件,例如就命名为mixin.js

将methods(即在不同组件中重复使用的代码)放到这个文件中,写成配置对象的形式,然后export这个对象

export const mixin_test = {
    methods: {
        showName() {
            alert(this.name);
        }
    },
}

第二步:

在需要用到这个methods的组件中import(引入)这个文件

在组件1中:

import { mixin_test } from '@/mixin';

然后再在该组件中添加mixins配置项,写法如下:

mixins:[mixin_test]

组件2进行相同的操作

这样mixin.js中的内容就混入到了组件1和组件2中,可以使用了

mixin.js中的内容不仅仅局限于methods,也可以是其他的,比如data配置项,computed配置项等等

例如,在每个组件中有同一个data属性,那么就放到mixin.js文件中:

export const mixin_test = {
    methods: {
        showName() {
            alert(this.name);
        },
        showTestText() {
            alert(this.testText);
        }
    },
    data() {
        return {
            testText: '我是共有的属性,所以我可以被放在mixin.js文件中'
        }
    }
}

对应的组件模板:

<template>
    <div class="student">
        <h2 @click="showName">学生姓名:{{name}}</h2>
        <h2>学生年龄:{{age}}</h2>
        <button @click="showTestText">点我显示共有的text</button>
    </div>
</template>

点击按钮后的页面提示:

如果出现mixin中的内容与某个组件中的内容冲突,比如mixin的data中有myown属性,而在组件1的data中也有myown属性:

//组件1的data
data(){
            return {
                msg:'我是名学生',
                age:30,
                name:'张三',
                sex:'男',
                myown:'这是属于student组件的内容'
            }
        },
//mixin.js中的data
data() {
        return {
            testText: '我是共有的属性,所以我可以被放在mixin.js文件中',
            myown: '这是mixin.js文件的内容'
        }
    },

创建点击按钮进行测试

<button @click="showMyOwn">点我显示myown</button>

showMyOwn() {
            alert(this.myown);
        }

页面显示结果:

可见,组件自身的内容的优先级更高,如果组件自身没有这项属性,混入后就会显示混入的属性

上述的mixin.js文件的引用,都是在每个组件里面单独引用,这种引用方式叫局部引用

还有另一种引用方式叫全局引用,指在main.js中引用.引用方式如下:

在main.js中输入以下代码即可,其中"xxx"是你自己命名的混入对象的名字

import { xxx } from './mixin'
Vue.mixin(xxx)

这样整个项目中的Vue实例对象和组件实例对象就都可以使用mixin中的内容了

注意:上述代码必须写在你创建Vue实例对象之前,否则是没用的!