vue中mixins使用原理详解

混入 (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：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。