1. 父子传参
父传子：
方法1：
在父组件中加入子组件，给子组件绑定需要传递的值
import Policy from './components/policy'; // 保单信息组件
components: {
Policy
},
<Policy :sign="true"/>
子组件接收：
props: ['sign'],
// 子组件中调用父组件传的值
<el-form class="mar-top10" :disabled="sign" :model="policyInformation">
方法2：
利用vuex设置全局变量(这么直接写不推荐，写法需要改进。同时如果每次请求都对vuex 进行赋值，一定会影响性能)
this.$store.state.dataEdorList = res.body.data.dataEdorList; // 保全受理-保全项信息
子组件接收：
import { mapState } from 'vuex';
computed: {
...mapState([ 'dataEdorList '])
},
<el-table size="mini" align='center':data="dataEdorList">
方法3：
通过路由来传递参数，下面这个例子的写法在打开新的标签页的同时也传递参数
let routeDetail = this.$router.resolve({
path: `/edorseBusiness/preservationDetail/EdorseBusinessDetail${edorTypeCode}`, // 保全项动态拼接
query: { onlyReadSign: true, navtabs: true } // 项目里通过传这个navtabs: true这个参数 来隐藏菜单栏
});
window.open(routeDetail.href, '_blank');
如果无需打开新的标签页可以这么写;
this.$router.push(`/edorseBusiness/preservationDetail/EdorseBusinessDetail${edorTypeCode}`, query: {onlyReadSign: true})
跳转的路由（组件/子组件）接收参数
mounted() {
this.onlyReadSign = this.$route.query.onlyReadSign; //true: 编辑，false: 只显示
}
子传父：
方法1：
通过$emit，子组件中代码
this.$emit('payShowSign', true); // 这里我传的是一个true ，其实可以传递任何值（比如对象、数组等等），事先声明好要传递的值即可
父组件接收：
// 父组件通过getPayShowSign事件拿到子组件返回的值
<ProjectSave ref="ProjectSave" @payShowSign="getPayShowSign" />
getPayShowSign(data) {
this.payShowSign = data;// console.log('收付费是否显示的标志', this.payShowSign);
this.detailQuery(); // 在执行这个事件的同时，可以做别的操作
},
方法2：
通过父组件通过$refs拿到子组件中的方法（拿到子组件方法中的 return值），子组件中代码：
applicationConf() {
let queryHome = JSON.parse(window.decodeURIComponent(atob(this.$route.query.queryHome)));
let applicationConfData = {
edorAcceptNo: queryHome.edorAcceptNo, // 保全受理号
contNo: queryHome.contNo, // 合同号
getPayForm: this.pageData.getPayForm, // 收付费方式
payGetName: this.pageData.payGetName, // 补退费人
bankCodeProvince: this.pageData.provincebank, // 开户行省
bankCodeCity: this.pageData.citybank, // 开户行市
bank: this.pageData.bankAccountCode, // 开户银行
bankAccNo: this.pageData.bankAccountNo, // 银行账户
accName: this.pageData.bankAccountName, // 户名
idType: this.pageData.typeName, // 证件类型
idNo: this.pageData.number, // 证件号码
relaToAppnt: this.pageData.relaToAppnt, // 与投保人关系
cardType: this.pageData.cardremake, // 卡折标记
operator: this.userInfo.applyerCustomerNo, // 操作员
edorRiskFlag: this.pageData.riskRadio, // 保全操作风险
sendType: this.pageData.printItemList, // 批单送达方式
email: this.pageData.email, // 邮箱
mark: '', // 备注
flag: '' // 申请资料是否齐全
};
return applicationConfData; // 这是要返回给父组件的值
},
父组件接收：
<Payment ref="payment"/> // 引用的子组件
import Payment from './components/payment'; // 收付费方式信息
let params = this.$refs['payment'].applicationConf(); // 在方法里给变量赋值,拿到子组件返回的值
方法3：
同前面写到的父传子写到的路由传参：
方法4：
同前面写到的vuex：
未完！待续！先上班了
