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混入是什么?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏