夜光带你走进Vue.js（二十八）擅长的领域Vue.js 混入

45 阅读 0 评论 30 点赞

我是靠谱客的博主热情嚓茶，最近开发中收集的这篇文章主要介绍夜光带你走进Vue.js（二十八）擅长的领域Vue.js 混入，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

夜光序言：

不要为了合群制造一些没必要的约定，只会浪费时间。

正文：

Vue.js 混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。

混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

来看一个简单的实例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>

<body>
<div id = "databinding"></div>
<script src="../js/vue.js"></script>
<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 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>

</head>

<body>
<div id = "databinding"></div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var mixin = {
        created: function () {
            document.write('混入调用' + '<br>')
        }
    };
    new Vue({
        mixins: [mixin],
        created: function () {
            document.write('组件调用' + '<br>')
        }
    });
</script>

</body>
</html>

methods 选项中有相同的函数名，则 Vue 实例优先级会较高。

我们举个例子，Vue 实例与混入对象的 methods 选项都包含了相同的函数：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>

</head>

<body>
<div id = "databinding"></div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    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();
</script>

</body>
</html>

还有一个重要的东西：全局混入

也可以全局注册混入对象。

注意使用~~ 一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。

使用恰当时，可以为自定义对象注入处理逻辑。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>

</head>

<body>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    // 为自定义的选项 'myOption' 注入一个处理器。
    Vue.mixin({
        created: function () {
            var myOption = this.$options.myOption
            if (myOption) {
                document.write(myOption)
            }
        }
    });

    new Vue({
        myOption: 'genius'
    })
    // => "genius"
</script>

</body>
</html>