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