Vue.js学习笔记（6）混入

最新推荐文章于 2025-06-26 11:32:47 发布

昆山一百计算机有限公司

最新推荐文章于 2025-06-26 11:32:47 发布

阅读量343

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/ekcchina/article/details/124445454

Vue 专栏收录该内容

105 篇文章

订阅专栏

本文介绍了Vue.js中的混入(mixins)概念，包括如何创建和使用混入对象，展示了混入如何与组件的选项合并。当组件和混入对象有同名选项时，Vue会进行妥当的合并策略，如数据对象进行浅合并，方法优先级遵循组件优先原则。同时，文章还提到了全局混入的使用，强调需谨慎使用以避免影响所有后续创建的Vue实例。通过实例代码，详细解析了混入的创建、选项合并以及全局混入的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Vue.js混入

混入 (mixins)是一部分可复用的方法或者计算属性。混入对象可以包含任意组件。当组件使用混入对象时，所有混入对象的选项将被加入到该组件本身的选项。
下面是简单的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <title>中亿丰数字</title>
    
</head>
<body>
    <div id = "databinding"></div>
    <script type = "text/javascript">
    var vm = new Vue({
        el: '#databinding',
        data: {
        },
        methods : {
        },
    });
    // 定义一个混入对象
    var myMixin = {
        created: function () {
            this.startmixin()
        },
        methods: {
            startmixin: function () {
                document.write("欢迎来到混入实例");
            }
        }
    };
    var Component = Vue.extend({
        mixins: [myMixin]
    })
    var component = new Component();
    </script>
</body>
</html>

在这里插入图片描述

选项合并

当组件和混入对象含有同名选项时，这些选项将以一种妥当的方式混合。
例如说，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时会以组件数据优先。
在下面的实例中，Vue 实例与混入对象有着同样的方法。从输出结果不难看出，这两个选项合并了。

var mixin = {
    created: function () {
        document.write('混入调用' + '<br>')
    }
}
new Vue({
    mixins: [mixin],
        created: function () {
        document.write('组件调用' + '<br>')
    }
});

在这里插入图片描述
如果 methods 选项中有同样的函数名，那么 Vue 实例优先级会较高。如下所示，相同的函数都被包含在了Vue实例与method选项中：

var mixin = {
    methods: {
        hellworld: function () {
            document.write('HelloWorld 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Mixin：相同方法名' + '<br>');
        }
    }
};
var vm = new Vue({
    mixins: [mixin],
    methods: {
        start: function () {
            document.write('start 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Main：相同方法名' + '<br>');
        }
    }
});
vm.hellworld();
vm.start();
vm.samemethod();

在这里插入图片描述
就输出结果而言，methods 选项中如果有相同的函数名，那么 Vue 实例有更高的优先级会执行输出。

全局混入

也能够被称作全局注册混入对象。请务必小心！一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象输入处理逻辑。

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      document.write(myOption)
    }
  }
})

new Vue({
  myOption: '中亿丰数字!'
})