vue混入是什么？

vue混入是什么？

Vue中的混入，即mixins。

混入是干嘛的？

官方是这么说的：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

混入其实就是实现了单一继承和多重继承。

（相关课程推荐：Vue.js教程）

应用场景

比如在SPA（单页应用）开发的时候，进入每个组件，你都需要弹出“欢迎进入XXX组件”(实际情况你可能需要多个数据和方法)。这个时候你只需要通过混入就可以方便的实现。这个有点像java的抽象类，子类（子组件）只需要继承，然后需要重写就重写，需要直接调用抽象类的方法就直接调用抽象类的方法。

例子

<template>
    <div>
        {{name}}
        {{age}}
        <button @click = "sayHello">sayhello</button>
    </div>
</template>

<script>
    let mixin1 = {
        data() {
            return {
                name: 'wcx',
                age: 12
            }
        },
        created() {
            console.log('混入created调用')
        },
        methods: {
            sayHello() {
                console.log('hello, mixin')
            },
            sayHi() {
                console.log('hi, mixin')
            }
        }
    }
    // @ is an alias to /src
    export default {
        name: 'home',
        mixins: [mixin1],
        data() {
            return {
                name: 'wry'
            }
        },
        created() {
            console.log('自身组件调用');
            this.sayHello();
        },
        methods: {
            sayHello() {
                console.log('hello, myself')
            }
        }
    }
</script>

本文来自Vue.js答疑栏目，欢迎学习！

以上就是vue混入是什么？的详细内容，更多请关注易知道|edz.cc其它相关文章！