一。父组件向子组件传值(注:传的值需要在父组件的data{return{}}中初始化)
在父组件的代码中编写
//以弹窗为例
<a-modal
v-model="isshow"//是否显示
title="修改"
centered
height="70%"
width="35%"
:footer="null"
:destroyOnClose="true"
>
<div class="model_flow">
<son
:data="data"
:name="name"
:shuzi="shuzi"
></son>
</div>
</a-modal>
子组件中用prop接收
props:{
Data:Array,//数组
name:String,//字符串
shuzi:Number//数字
},
二、子组件把值传给父组件(与父传子不同,这个不用初始化定义)
将子组件获取的值用
this.$emit("fun", this.name);
传递给父组件
然后
父组件接收
<Son
:buttonName="buttonName"
:divId="divId"
ref="son"
@fun="getname"
></Son>
下方调用getname方法获取
getname(data) {
this.name= data;
},
三。使用session传值
先用session存值
window.sessionStorage.setItem("keyword", this.name);
哪里需要就在那里使用
name= window.sessionStorage.getItem("keyword");
四。页面与页面之间的传值(到新页面)
1.传值到新页面
//跳转组织关系
toOrganizationShip() {
this.isShow = false;
this.isOrg = false;
let routeObject = this.$router.resolve({
path: "/relation",
query: { zzjgdm: this.inputValue.zzjgdm ,zzmc: this.inputValue.name},//注意看f12里用的是什么
});
window.open(routeObject.href, "_blank");
},
2.传值在当前标签页
this.$router.push({
path: "/detail",
query: {
caseNumber: caseNumber,
},
});
跳转后页面
created() {
// this.zzjgdm = this.$route.query.zzjgdm;
// this.zzmc = this.$route.query.zzmc;
},
mounted() {
this.isOrg = true;
this.h = window.getComputedStyle(this.$refs.graphBox).height;
this.w = window.getComputedStyle(this.$refs.graphBox).width;
this.zzjgdm = this.$route.query.zzjgdm;
this.zzmc = this.$route.query.zzmc;
if(this.$route.query.zzjgdm==undefined&&this.$route.query.zzmc==undefined){
this.zzmc=""
}else{
this.handleSubmit();
}
},
跳转同项目不同主题的页面:
首先明确跳转后的页面路径是http://192.111.1.222/#/detail?caseNumber=C10006
1.在表格下设定为可操作
<template slot="ajbh" slot-scope="text, record">
<a @click="oneCase(record.ajbh)">{{ record.ajbh }}</a>
</template>
2.方法
//跳转案件主题一案一档
oneCase(ajbh) {
window.open(
this.jumpUrl.personNewCaseTopicsUrl + "/#/detail?caseNumber=" + ajbh
);
},
其中jupmUrl为一个工具js文件(配置访问路径的),内容为:
const personNewCaseTopicsUrl=process.env.VUE_APP_DOMAIN_CASE
export default {
personNewCaseTopicsUrl,
}
然后jupmUrl.js文件在拼接.env.development(配置跳转路径的文件):
VUE_APP_DOMAIN_CASE="http://192.111.1.222"