(1)A–> 父–>B
//1.子传父
//子组件invoiceInfo.vue
this.$emit("updateInvoice",this.formData);
//父组件baseEdit.vue
<div class="cpllapse-content">
<InvoiceInfo
:canEdit = "canEdit"
:currencyList = "currencyList"
@updateInvoice="updateInvoice"
@resetRowInfo = "resetRowInfo"
@setRateInfo = "setRateInfo"
ref="invoiceInfo" />
</div>
method:{
// 发票信息变更
updateInvoice(invoiceInfo){
this.invoiceInfo = invoiceInfo;
},
}
//2.父传子
//父组件中注册子组件,用v-bind绑定属性
<div class="cpllapse-content">
<RateInfo
:canEdit="canEdit"
:invoiceInfo="invoiceInfo"
ref="rateInfo" />
</div>
import RateInfo from "./components/rateInfo";
components: {
InvoiceInfo,
RateInfo,
AccountingInfo,
RowInfo,
},
//子组件中使用props接收属性值
props: {
companyList: {
type: Array,
default: () => [],
},
canEdit: {
type: Boolean,
default: false,
},
invoiceInfo: {
type: Object,
default: () => {},
},
},
(2)$refs
A中取值,emit方法传给父组件,并在emit方法中修改B中的值
//A组件中emit提交方法和参数
this.$emit("setRateInfo",info)
//父组件中接收emit方法并修改B中的值
//ref给子组件注册引用信息
<RateInfo
:canEdit="canEdit"
:invoiceInfo="invoiceInfo"
ref="rateInfo" />
// 默认根据客户取主数据合作伙伴的字段值
setRateInfo(info){
console.log("传值成功!!!");
console.log(this.$refs);
this.$refs.rateInfo.formData.openBankName = info.invoiceBankName;
this.$refs.rateInfo.formData.bankAccount = info.invoiceBankAccount;
this.$refs.rateInfo.formData.creditCode = info.creditCode;
this.$refs.rateInfo.formData.partnerAddress = info.invoiceAddress;
this.$refs.rateInfo.formData.goldenTaxType = info.taxType;
this.$refs.rateInfo.formData.partnerPhone = info.invoicePhone;
},