Vue学习:mixin混入

最新推荐文章于 2024-10-18 15:58:53 发布

¡Venceremo

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量134

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/129169296

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

混入(Mixin)是Vue.js中一种复用组件功能的方法，允许将一些通用功能抽取到单独的对象中，然后在多个组件中通过mixins属性引入。混入对象可以包含任意组件选项，如data、methods、生命周期钩子等。当组件的数据和生命周期钩子与混入对象有同名时，组件内的会优先使用，但生命周期钩子都会执行。

摘要由CSDN通过智能技术生成

两个vue文件，具有相同部分，可以就将相同部分删除然后重新写一个新的相同部分将原来的删除进行引入，这就是混入：两个组件共享一个相同的配置

mixin.js编写混合部分，所有配置项都可以写成混合

export const mixin1 = {
    methods: {
        showName() {
            alert(this.name)
        }
    },
    //
    mounted() {
        console.log('挂载完成，所有配置项都可以写成混合')
    },
}//分别暴露
export const mixin2 = {
    data() {
        return {
            a: 10,
            b: 23
        }
    }
}//分别暴露

在组件中引入混合（所有具有相同混合的组件都需要引入）

   import {mixin1,mixin2} from '../mixin.js';

配置项mixins 进行引入

   mixins:[mixin1,mixin2]

当你原先的data中存在和混合相同的参数，不会被混合破坏

但是对于生命周期钩子，都会使用而不是只需要原来里面的配置

在组件里面的局部混合.vue

    import {mixin1,mixin2} from '../mixin.js'
    export default {
        name: 'School',
        data() {
            return {
                msg:'学校信息',
                name:"xxx学校" ,
                adress:"山东"
            };
        },
        mixins:[mixin1,mixin2]
    };

前面的是局部混合，还有全局混合，在main.js中

import App from './App.vue'
//全局混合
import {mixin1,mixin2} from './mixin.js'
//关闭生产提示
Vue.config.productionTip = false

Vue.mixin(mixin1)
Vue.mixin(mixin2)

输出4变，前面的每个挂载都会输出