Vue2:mixin属性的用法

本文介绍了如何在Vue组件中使用mixin来提取和复用公共代码,包括创建mixin文件、局部和全局引用示例,以及处理可能的命名冲突问题。
摘要由CSDN通过智能技术生成

一、场景描述

当两个vue组件的vc实例,都用到同一个变量或者方法时,可以,我们能否把公共的代码提取出来,然后,分别引入进行使用了?
答案是肯定的,这里就用到mixin实现这个效果。

二、mixin提取公共代码并使用

1、创建js文件

mixin.js(这个名称随便)

export const hunhe = {
    methods:{
        showName(){
            alert(this.name);
        }
    },
    mounted() {
        console.log('你好啊!')
    }
}

export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

2、创建两个组件

School.vue

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

<script>
    export default {
        name: "School",
        data() {
            return {
                name:"Vue",
                address:"中国"
            }
        },
    }
</script>

Student.vue

<template>
    <div>
        <h2 @click="showName">学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
    </div>
</template>

<script>
    export default {
        name: "Student",
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        },
    }
</script>

3、局部引用mixin.js

Student.vue中引用

<script>
    import {hunhe,hunhe2} from '../mixin'
    export default {
        name: "Student",
        data() {
            return {
                name:'张三',
                sex:'男'
            }
        },
        mixins:[hunhe,hunhe2]
    }
</script>

School.vue中引用

<script>
    import {hunhe,hunhe2} from '../mixin'
    export default {
        name: "School",
        data() {
            return {
                name:"Vue",
                address:"中国"
            }
        },
        mixins:[hunhe,hunhe2]
    }
</script>

4、全局引用mixin.js(不推荐)

首先,要把局部引用给注释掉,否则重复引用。
修改main.js入口文件

//下面引入后,那么,所有的vue组件的vc实例都被引入了hunhe和hunhe2对象
import {hunhe,hunhe2} from './mixin'

Vue.mixin(hunhe);
Vue.mixin(hunhe2);

三、效果展示

使用全局引入mixin.js后,该项目的所有vue组件都包含了公共变量x,y
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

四、总结

  1. 功能:可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式:
    第一步定义混合:
{
    data(){....},
    methods:{....}
    ....
}

第二步使用混入:
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']

补充问题:在定义混合里,我们定义的变量名,和方法如果和组件自身的变量名与方法名重名了,会怎么样了?大家可以自行测试下,这样印象更深刻!

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值