Vue 2 Mixin 混入-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 2 Mixin 混入。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

混入（Mixins）是一种在Vue组件中重用代码的方式。它允许你定义一些可复用的选项对象，然后将这些选项合并到不同的组件中。混入可以用于在多个组件之间共享逻辑、方法、生命周期钩子等。

示例：

<!DOCTYPE html>
<html>

<head>
    <title>Vue mixin demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        // 定义一个混入对象
        const myMixin = {
            data() {
                return {
                    message: 'Hello from mixin!'
                }
            },
            methods: {
                greet() {
                    console.log(this.message)
                }
            }
        }

        Vue.component('my-component', {
            mixins: [myMixin],
            template: '<div>{{message}}</div>',
            created() {
                this.greet()
            }
        })
        var vm = new Vue({
            el: '#app',
        });
    </script>
</body>

</html>

选项合并

当组件和混入对象的选项同名时，数据对象data中同名选项以组件的优先，进行递归合并；同名钩子函数则会被合并为数组，它们都会执行，且混入对象的钩子函数先执行。

对于methods、components、directives这些值为对象的选项，同名键的合并例子如下：

<!DOCTYPE html>
<html>

<head>
    <title>Vue mixin demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
        const mixin = {
            methods: {
                greet() {
                    console.log('Hello from Mixin!');
                },
                sayHello() {
                    console.log('Mixin says hello!');
                },
            }
        };

        var Component = Vue.extend({
            methods: {
                greet() {
                    console.log('Hello from extend!');
                },
                sayHello() {
                    console.log('extend says hello!');
                },
                sayGoodbye() {
                    console.log('extend says goodbye!');
                }
            }
        });

        new Component({
            mixins: [mixin],
            methods: {
                greet() {
                    console.log('Hello from component!');
                },
            },
            created() {
                this.greet();        // Output: Hello from component!
                this.sayHello();     // Output: Mixin says hello!
                this.sayGoodbye();   // Output: extend says goodbye!
            }
        });

    </script>
</body>

</html>

由上面得出选项合并优先级：new Component > mixins > Vue.extend。

全局混入

全局混入会影响每一个Vue实例。

使用Vue.mixin({})方法创建全局混入。

尽量避免使用全局混入，这样会导致逻辑分散、代码难以阅读、维护困难。

⭐自定义选项合并策略

下面是一个示例：

const customMergeStrategies=Vue.config.optionMergeStrategies
customMergeStrategies.customOption=function(parentVal,childVal){
    if(!childVal) return parentVal
    if(!parentVal) return childVal
    //合并逻辑，可根据需要修改
    return parentVal.concat(childVal)
}

关键是了解Vue.config.optionMergeStrategies的作用，它用于帮助我们自定义某个选项的合并策略函数，该函数第一个参数是父组件的该选项值，第二个参数是子组件的该选项值。文章来源地址https://www.toymoban.com/news/detail-659795.html

到了这里，关于Vue 2 Mixin 混入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！