vuejs中如何使用mixin-局部混入/全局混入

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

前言

我们在实际项目开发中,有很多基本相似功能模块,只是操作显示数据不同,很多逻辑和配置都是相同的

在Vue项目里,每个单文件组件都是一个模块组件,每个组件都有自己内部的数据和方法逻辑

如果每个单文件组件想要实现同样的功能

那么在每个单文件组件都要在逻辑业务代码里重复写一遍,这样在很多单文件组件内,到处都是从某一处复制粘贴过来的代码

在Vue当中,可以用封装组件来达到复用代码的目的,除了可以复用模板,那么逻辑,一些配置选项,是不是也可以公用?

当然是可以的,当只需要二次修改时,同样的逻辑的代码，只需要修改一处就可以了的

今天就来学习下Vue当中的这个mixin的,多个组件,当遇到相同的逻辑,是如何共用逻辑配置的

01

需求

假设:现在有两个不同的按钮组件ButtonA,ButtonB,点击它弹出组件自身不同的属性

用Vue-cli脚手架创建一个项目,在components文件夹下分别创建ButtonA.vue,ButtonB.vue两个组件

以下是ButtonA组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义

<template>
    <div class="wrap">
        <button @click="handleButton">按钮组件A</button>
    </div>
</template>
<script>
    export default {
        name: "ButtonA",
        data() {
            return {
                name: "itclan.cn"
            }
        },
        methods: {
            handleButton() {
                alert(this.name);
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrap {
    margin-right: 20px;
}
</style>

以下是ButtonB组件内容,在按钮上绑定了handleButton方法,并在methods选项配置中定义

<template>
    <div>
        <button @click="handleButton">按钮组件B</button>
    </div>
</template>

<script>
    export default {
        name: "ButtonB",
        data() {
            return {
                name: "video.itclan.cn"
            }
        },
        methods: {
            handleButton() {
                alert(this.name);
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

然后再App.vue当中引入两个ButtonA,ButtonB组件