vue中mixins使用原理详解

最新推荐文章于 2022-06-22 16:22:49 发布
最新推荐文章于 2022-06-22 16:22:49 发布
阅读量4.1k 收藏 1
点赞数 5
分类专栏： vue学习 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43152108/article/details/108376143
版权

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
1.把要用的方法抽出来 写一个js 然后暴露出去 里面的参数以及this 都相当于组件注入 可以全局调用

import { mapActions, mapState } from "vuex";
export default {
    props: ["itemdata"],
    data() {
        return {
            // actionData: {},
            paramJson: {},
            buttonType: "button",
        };
    },
    computed: {
        ...mapState(["pagecomponents", "cachedata","pagecomponentsCheck"]),
    },
    methods: {
        ...mapActions(["getActionData", "getProcessData","changecompVal"]),
        handleEvent(itemdata) {
            itemdata = JSON.parse(itemdata);
			console.log('00000000',itemdata)
            // 动作类型
            switch (itemdata.actionType) {
                case "openurl": // 打开网址
                    this.paramJson = {};
                    if (itemdata.isparameter === "true") {
                        const { parameList } = itemdata;

                        parameList.forEach((item) => {
							if(item.subparamValue){
								this.paramJson[
								    item.fieldparamName
								] = this.tableItem[item.subparamValue];
							}else{
								this.paramJson[
								    item.fieldparamName
								] = this.pagecomponents[item.paramValue];
							}
                            
                        });
                    }
                    if (itemdata.urlsouce === "inside") {
                        if (itemdata.blank) {
                            let routeUrl = this.$router.resolve({
                                path: "/index",
                                query: {
                                    uuid: itemdata.myrulvalue,
                                    ...this.paramJson,
                                },
                            });
                            window.open(routeUrl.href, "_blank");
                        } else {
                            this.$router.push({
                                path: "/index",
                                query: {
                                    uuid: itemdata.myrulvalue,
                                    ...this.paramJson,
                                },
                            });
                        }
                    } else if (itemdata.urlsouce === "outside") {
                        if (itemdata.blank) {
                            window.open(itemdata.url, "_blank");
                        } else {
                            window.open(itemdata.url);
                        }
                    }
                    break;
                case "tips":
                    this.$notification.info({
                        message: "提示",
                        description: itemdata.tipsDesc,
                        duration: itemdata.tipsTime,
                    });
                    break;
                case "flow":
                    this.dataShow(itemdata);
                    break;
                case "popconfirm":
                    var {
                        popconfirm: { poptitle, confirm, cancel },
                    } = itemdata;
                    var { processId } = confirm;
                    var This = this;
                    sessionStorage.setItem("processId", processId);

                    this.$confirm({
                        title: poptitle,
                        okText: "确认",
                        cancelText: "取消",
                        onOk() {
                            This.dataShow(itemdata);
                        },
                        onCancel() {
                            console.log("cancel => ", cancel);
                        },
                    });
                    break;
                default:
                    break;
            }
        },
        dataShow(data) {
            let formData = {};
            if (data.actionType == "flow") {
                data = data;
            } else if (data.actionType == "popconfirm") {
                data = data.popconfirm.confirm;
            }
			console.log('******')
            for (let index = 0; index < data.flowreqList.length; index++) {
                let element= data.flowreqList[index]
                if (element.source == "url") {
                    formData[element.paramsName] = this.pagecomponents[
                        element.fieldparamName
                    ];
                } else if (element.source == "page") {
					
					if(element.fieldbtnuuid){
						formData[element.paramsName]= this.tableItem[element.fieldbtnuuid];
					}else{
						formData[element.paramsName] = this.pagecomponents[
						    element.uuid
						];
					}
					
                    if(this.pagecomponentsCheck[element.uuid]==false){
                        return
                    }
                 
                } else if (element.source == "flow") {
                    //流程的值怎么取
                    formData[element.paramsName] =
                        element.processresparamType == "Entity"
                            ? this.cachedata[element.processId][
                                  element.processresparam
                              ][element.processresparamsub]
                            : this.cachedata[element.processId][
                                  element.processresparam
                              ];
                } else {
                    console.log("333");
                }
                
            }
           

            this.getProcessData({
                processJsonUUid: data.processId,
                paramsJson: JSON.stringify({ data: formData }),
            }).then((res) => {
                console.log("请求结束 =>", res);
                this.$store.commit("changecachedataVal", {
                    processId: data.processId,
                    res: res,
                }); //缓存请求回来的数据 以及processId

                if (data.actionType == "popconfirm") {
                    if (data.resresult == "openurl") {
                        this.paramJson = {};
                        if (data.isparameter === "true") {
                            const { parameList } = data;

                            parameList.forEach((item) => {
								
								if(item.subparamValue){
									this.paramJson[
									    item.fieldparamName
									] = this.tableItem[item.subparamValue];
								}else{
									this.paramJson[
									    item.fieldparamName
									] = this.pagecomponents[item.paramValue];
								}
								
                            });
                        }
                        if (data.urlsouce === "inside") {
                            if (data.blank) {
                                let routeUrl = this.$router.resolve({
                                    path: "/index",
                                    query: {
                                        uuid: data.myrulvalue,
                                        ...this.paramJson,
                                    },
                                });
                                window.open(routeUrl.href, "_blank");
                            } else {
                                this.$router.push({
                                    path: "/index",
                                    query: {
                                        uuid: data.myrulvalue,
                                        ...this.paramJson,
                                    },
                                });
                            }
                        } else if (data.urlsouce === "outside") {
                            if (data.blank) {
                                window.open(data.url, "_blank");
                            } else {
                                window.open(data.url);
                            }
                        }
                    } else if (data.resresult == "tips") {
                        this.$notification.info({
                            message: "提示",
                            description: data.tipsDesc,
                            duration: data.tipsTime,
                        });
                    } else {
                        data.flowresList.forEach((element) => {
                            //如果是entity 则循环里面的 children 取 paramsName===的值付给cumpuuid
                            if (element.paramsType == "Entity") {
                                element.children.forEach((el) => {
                                    // this.pagecomponents[el.compuuid] =res[element.paramsName][el.paramsName];
										this.changecompVal({
											 label: el.compuuid,
											 value: res[element.paramsName][el.paramsName]
										});
                                });
                                //否则就走正常修改数据接口 里面的值循环插入就行
                            } else {
								this.changecompVal({
									 label: element.compuuid,
									 value: res[element.paramsName]
								});
                                // this.pagecomponents[element.compuuid] =res[element.paramsName];
                            }
                        });
                    }
                } else if (data.resresult == "openurl") {
                    this.paramJson = {};
                    if (data.isparameter === "true") {
                        const { parameList } = data;

                        parameList.forEach((item) => {
                            this.paramJson[
                                item.fieldparamName
                            ] = this.pagecomponents[item.paramValue];
                        });
                    }
                    if (data.urlsouce === "inside") {
                        if (data.blank) {
                            let routeUrl = this.$router.resolve({
                                path: "/index",
                                query: {
                                    uuid: data.myrulvalue,
                                    ...this.paramJson,
                                },
                            });
                            window.open(routeUrl.href, "_blank");
                        } else {
                            this.$router.push({
                                path: "/index",
                                query: {
                                    uuid: data.myrulvalue,
                                    ...this.paramJson,
                                },
                            });
                        }
                    } else if (data.urlsouce === "outside") {
                        if (data.blank) {
                            window.open(data.url, "_blank");
                        } else {
                            window.open(data.url);
                        }
                    }
                } else if (data.resresult == "tips") {
                    this.$notification.info({
                        message: "提示",
                        description: data.tipsDesc,
                        duration: data.tipsTime,
                    });
                } else {
                    data.flowresList.forEach((element) => {
                        //如果是entity 则循环里面的 children 取 paramsName===的值付给cumpuuid
                        if (element.paramsType == "Entity") {
                            element.children.forEach((el) => {
                                this.pagecomponents[el.compuuid] =
                                    res[element.paramsName][el.paramsName];
                            });
                            //否则就走正常修改数据接口 里面的值循环插入就行
                        } else {
                            this.pagecomponents[element.compuuid] =
                                res[element.paramsName];
                        }
                    });
                }
            });
        },
    },
    mounted() {
       this.$nextTick(()=>{
           let $this = this;
		   if(this.itemdata.action&&JSON.parse(this.itemdata.action)!='load'){
			   this.$refs[this.itemdata.uuid].$el.addEventListener(JSON.parse(this.itemdata.action).eventType,function(){
			       $this.handleEvent($this.itemdata.action)
			   })
		   }else if(JSON.parse(this.itemdata.action)=='load'){
			   $this.handleEvent($this.itemdata.action)
		   }
           
       })
        // this.actionData = JSON.parse(this.data);
        // this.getActionData(this.actionData);
        // const { processId } = this.actionData;
        // sessionStorage.setItem("processId", processId);
    },
};

在这里插入图片描述
2.页面引入

<template>
    <div>
        <a-button type="primary" :ref="itemdata.uuid" >{{itemdata.value}}</a-button>
    </div>
</template>

<script>
import mixin from "@/components/mixins/eventtype.js";
export default {
    mixins: [mixin],

};
</script>

<style lang="less" scoped></style>

在这里插入图片描述
这样就可以了 那个组件需要这个方法 引入就行了.直接使用

这里面暴露出来的数据是每个组件互不干扰 数据不共享
在这里插入图片描述
mixins和vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

与公共组件的区别
同样明显的区别来再列一遍哈~

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

一只大大大大狗
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Vue原理】Mixins - 源码版
神仙朱的博客
07-06 792
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Mixins - 源码版 今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理 篇幅会有...
vue mixins原理
wade3po的博客
09-10 1231
以前一直以为mixins在vue里面应该不是很重要，只是提供了一个混入的api，慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的影子，在内部算是很重要的一个api。 先上精简过后的源码： export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'befo
Vue 源码之 mixin 原理
Ljwen_的博客
05-18 1543
mixin的意思是混入，是指将事先配置的选项混入到组件中，然后与组件中的对象和方法进行合并，也就是对组件进行了扩展，也可以理解为是将一段重复的代码进行抽离，然后通过混入的形式达到复用的效果，它有两种混入形式，分别是 Vue.mixin({})全局注册和组件的 mixins选项，那么在 Vue 中，他们是怎么进行合并，具体实现是怎么样呢，这篇文章将进行讲解，相信你一定会有所收获； 首先是入口文件，在全局 api 的初始化文件中，通过调用 initMixin进行注册： // src/core/global-ap
Vue mixin原理分析
lznism666的博客
09-13 679
Vue在创建组件实例化之前，会将全局选项和组件选项合并起来，比如全局component, filter, directive, mixin。也就是说我们全局注册的选项会被引入到每个组件中，这样全局选项和组件选项就可以合并起来，之后在组件中就可以访问到全局选项。比如全局过滤器等。 为了保证全局选项不被污染，但是又不可能每个组件都深度克隆一遍，这样会导致全局选项的开销过大。 如何合并mixin 组件合并组件选项和全局选项的优先级 组件选项 组件mixin 组件mixin的mixin 组件mixin的…的mix
【Vue原理】Mixin - 白话版
神仙朱的博客
03-20 9931
【Vue原理】Mixin - 白话版什么时候合并怎么合并权重1、函数合并叠加2、数组叠加3、原型叠加4、覆盖叠加5、直接替换 专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，公众号的文章，排版更好看 如果你觉得排版难看，请点击下面公众号链接 【Vue原理】Mixin - 白话版 ...
vue的mixins属性详解
08-27
Vue 的 Mixins 属性详解 Vue 的 Mixins 属性是 Vue.js 框架中的一种高级功能，它允许开发者在不同的组件之间共享代码，减少代码冗余，提高开发效率。本文将深入讲解 Vue 的 Mixins 属性，解释其工作原理、使用方法...
详解Vue.js Mixins 混入使用
10-19
本篇文章主要介绍了Vue.js Mixins 混入使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中的混入的使用(vue mixins)
08-27
2. 在组件中使用混入：var vm = new Vue({ mixins: [mixin], ... }),其中 mixin 是刚才定义的混入对象。 混入的选项合并： 1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。 2. 数据对象在内部会...
vue中的scope使用详解
08-29
例如，在上面的 demo 中，我们使用了 template scope="scope" 来获取插槽上的属性值，然后在模板中使用 scope 来接收 slot 中的属性。 Scope 的使用 ------------- 在 Vue 中，Scope 主要用来获取插槽上的属性值。...
Vue中props的使用详解
08-27
Vue中props的使用详解 props属性是父子组件之间的通信桥梁，Vue中props的使用可以将父组件的数据传给子组件。 props属性可以在组件之间传递数据，实现父子组件之间的通信。 一、父子组件的概念 在Vue中，父子组件...
深入浅析Vue中mixin和extend的区别和使用场景
12-10
Vue中有两个较为高级的静态方法mixin和extend，接下来我们来讨论下关于他们各自的原理和使用场景。 Mixin： 原理： 先来看看官网的介绍： 参数：{Object} mixin 用法： 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 // 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (my
Vue mixin 原理分析二
lznism666的博客
09-14 206
1.mixin什么时候开始合并 合并分为两种 1.1 全局mixin和基础全局options合并 Vue.mixin = function(mixin) { this.options = mergeOptions(this.options, mixin); return this; } 其中基础全局options就是指components, directives, filters, 这3者一开始就挂载到了Vue.options上，所以这三个是最先存在的全局options 1.2 全局opt
vue源码解析：vue全局方法之Vue.mixin实现原理
lee前端技术站
07-17 652
提到vue全局方法mixin，可能我们比较陌生，因为在平时的开发中也不建议我们去使用他。但是我们还是有必要了解一下其实现的原理。 Vue.mixin( mixin ) 参数： {Object} mixin 作用： 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。 原理：src/core/global-api/mixin.js Vue.mixin = function (mixin: Object) {
vue学习--mixins混入机制
qq_23904519的博客
04-16 838
mixins混入：    vue中提供了一种混合机制--mixins，用来更加高效的实现组件内容的复用。    应用场景：        1.在已经写好子组件后，需要增加方法或者临时的活动时的方法，这时候加入mixins混入减少源代码复杂度；        2.很多地方需要用到的公用方法，用混入的方法可以减少代码量，实现代码重用。    与父子组件区别：        子组件在引用之后相当于在父组...
Vue中的Mixin理解
Kyoku0604的博客
11-10 244
当有不同组件的选项存在相同处理时，Vue为我们提供了一种叫做Mixin的混入功能。 它通过递归操作，将Mixin对象上的选项与组件中的选项合并，避免了组件间相同处理的代码冗余。 下面，我在项目中创建了一个叫做Comment的组件，然后将此组件作为另一个组件Mixin选项后，新组件就完全复制了Comment组件的功能。 Comment.vue <template> ... </te...
mixins混合
Dear_Mr的博客
05-23 792
mixins混合混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例子：// 定义一个混合对象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () {
深入了解vue的mixins属性
weixin_34138521的博客
12-26 99
这篇文章主要介绍了vue的mixins属性详解，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。 今天在开发项目的时候要改变一个标签的属性，因为项目中有多个地方都要改(业务逻辑相同)，所以就看有没办法只改变一个地方，把方法加进去,最后找官网就发现这个属性。下面是我的-mixin.js ...
【前端知识之Vue】对vue中mixin的理解
weixin_44337386的博客
06-22 2760
本系列主要整理前端面试中需要掌握的知识点。本节介绍对vue中mixin的理解。
vue原理探索
一个还在路上的人……
09-01 390
数据响应式实现 实现数据追踪变化 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原...
vue中mixins
最新发布
06-14
以下是如何在Vue中使用Mixins的简单示例： ```html <!-- Mixin.vue --> export default { data: () => ({ message: 'Hello from Mixin' }), methods: { sayHello() { console.log(this.message); } } }; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值