Vue学习之混入(Mixin)

时间：2025-02-07 20:36:59

Vue学习之混入

文章目录

  • Vue学习之混入
  • 一、什么是混入？
  • 二、注册混入
  • 三、使用混入
    • 1. 局部混入
    • 2.全局混入
  • 四、混入的规则
  • 总结

一、什么是混入？

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

其实可以将混入理解为一个公共组件，这个公共组件可以融合到其他组件中。编写代码的时候。可以将组件中相同的部分抽象出来写成一个混入对象，减少代码重复。

二、注册混入

混入对象和组件对象基本是相同，都有data、method和一系列生命周期钩子函数。

 //混入对象
        let mixin = {
            //数据
            data() {
                return {
                    mixinData: '混入的数据',
                    obj: { name: 'zhangsan', gender: 'male' }
                }
            },
            //生命周期
            created() {
                console.log('混入的created')
            },
            // 方法
            methods: {
                mixinMethod() {
                    console.log('mixinMethod方法')
                },
                test() {
                    console.log('混入的Method')
                }
            },
        }

三、使用混入

混入可以由全局混入和局部混入两种方式

1. 局部混入

        let vm = new Vue({
            el: '#app',
            //局部混入
            mixins: [mixin],
            data: {
                msg: 'hello',
            },
            created() {
                console.log('Vue的created');
            },
            methods: {
            },
        })

局部混入是要在一个组件中，用 mixins属性来混入，mixins是一个列表，可以使用多个混入。

2.全局混入

混入也可以全局注册，但是一般不会这么做，因为这样会让每个Vue实例都混入一个对象，应当避免使用。

全局混入：

Vue.mixin(mixin)

四、混入的规则

1.数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。
2.数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。
3.生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。
4.值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

总结

总结了在学习Vue时的关于混入的时候，混入是提高可复用性的对象，可混入组件中，让组件能使用混入的属性和方法等

相关文章