我正在构建一个使用vue.js的应用程序。该应用程序基本上有两个js文件。第一个用作着陆页上的参考，另一个用于后端。我需要在这些组件之间进行通信。最初，我使用localStorage将数据从着陆页传递到另一个内页，但决定像这样使用事件总线。
Vue.component('loan-calc', {
template: `<div class="row calc-holder" data-aos="fade-up" data-aos-delay="800">
<form>
<div class="wrap">
<div class="card_one">
<label for="">Loan Amount</label>
<p>The amount you want to take</p>
<div class="loan-amount-form">
<i class="icon naira">
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M14.814 5.764H13.302V7.726H14.814V9.22H13.302V13H11.286L8.244 9.22H4.716V13H2.232V9.22H0.684V7.726H2.232V5.764H0.684V4.288H2.232V0.219999H4.158L7.38 4.288H10.818V0.237999H13.302V4.288H14.814V5.764ZM4.716 7.726H7.056L5.472 5.764H4.716V7.726ZM10.116 7.726H10.818V5.764H8.55L10.116 7.726Z" fill="#03293D" />
</svg>
</i>
<input type="text" name="LoanAmount" v-model="LoanAmount" />
<i class="icon pencil">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z" fill="#03293D" />
</svg>
</i>
</div>
</div>
<div class="card_two">
<label for="">Loan Tenure</label>
<p>How long before you pay back completely</p>
<div class="loan-term-form">
<input type="text" v-model="LoanTenure" />
<i class="icon pencil">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z" fill="#03293D" />
</svg>
</i>
</div>
</div>
<div class="card_three">
<label for="">Repayment</label>
<p>Amount to be paid monthly</p>
<div class="form-repay">
<label for="">
<i class="icon">
<svg viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.814 5.764H13.302V7.726H14.814V9.22H13.302V13H11.286L8.244 9.22H4.716V13H2.232V9.22H0.684V7.726H2.232V5.764H0.684V4.288H2.232V0.219999H4.158L7.38 4.288H10.818V0.237999H13.302V4.288H14.814V5.764ZM4.716 7.726H7.056L5.472 5.764H4.716V7.726ZM10.116 7.726H10.818V5.764H8.55L10.116 7.726Z" fill="#03293D" />
</svg>
</i>
12,580
</label><small>per month</small>
</div>
</div>
<div class="card_repayment">
<label for="">Repayment Type</label>
<p>Select how you wish to replay the loan</p>
<div class="loan-term-form">
<input type="text" list="repaymentType" v-model="RepaymentType" />
<datalist id="repaymentType">
<option>Direct Debit Mandate</option>
<option>Cheques</option>
<option>Cash</option>
</datalist>
</div>
</div>
<div class="card_four">
<a href="/LoanOrigination/LoanRequest/" @click="getEstimatedLoanCal">
APPLY NOW <i class="icon">
<svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.584961 11.5841L5.17099 6.99807L0.584961 2.41205L1.99896 0.998047L7.99899 6.99807L1.99896 12.9981L0.584961 11.5841Z" fill="white"></path>
</svg>
</i>
</a>
<p>No collateral Needed</p>
</div>
</div>
</form>
</div>`,
data() {
return {
LoanAmount: null,
LoanTenure: null,
RepaymentType: null,
Repayment: null
}
},
props: {
_LoanAmount: this.LoanAmount,
_LoanTenure: this.LoanTenure,
_RepaymentType: this.RepaymentType,
_Repayment: this.Repayment
},
methods: {
getEstimatedLoanCal: function() {
if (this.LoanAmount != null) {
// Creat an event bus tha will share data between components
this.$root.$emit('msg_from_loancalc', this.LoanAmount);
}
}
}
})
在接收到另一个组件上的事件时，这些项目未显示在控制台日志中
Vue.component('loan-overview', {
template: `<div>
<div class="card">
<div class="contain">
<div class="top">
<div class="left">
<h3 for="">Your Loan</h3>
<p>₦{{LoanAmount}}</p>
</div>
<div class="right">
<h3 for="">Loan Tenure</h3>
<p>{{LoanTenure}} Months</p>
</div>
</div>
<div class="center">
<div class="t">
<h4>Repayment</h4>
<p class="l_p2">₦{{LoanAmount}}<span>per month</span></p>
</div>
<div class="t">
<h4>Repayment Type</h4>
<p class="l_p2">{{RepaymentType}}</p>
</div>
</div>
<hr>
<div class="bottom">
<div class="left">
<a href="#" data-toggle="modal" data-target="#editLoan">
<i class="icon">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.0534 3.6979L12.4445 1.07568C12.2721 0.904151 12.0388 0.807861 11.7956 0.807861C11.5524 0.807861 11.3191 0.904151 11.1467 1.07568L1.8978 10.3112L1.05336 13.9557C1.02423 14.0889 1.02523 14.227 1.05628 14.3597C1.08734 14.4925 1.14766 14.6167 1.23285 14.7232C1.31804 14.8297 1.42595 14.9158 1.54868 14.9752C1.67141 15.0347 1.80588 15.066 1.94225 15.0668C2.00579 15.0732 2.06982 15.0732 2.13336 15.0668L5.8178 14.2223L15.0534 4.99568C15.2249 4.82328 15.3212 4.58998 15.3212 4.34679C15.3212 4.1036 15.2249 3.8703 15.0534 3.6979ZM5.37336 13.4223L1.92003 14.1468L2.70669 10.7601L9.62669 3.86679L12.2934 6.53346L5.37336 13.4223ZM12.8889 5.88901L10.2222 3.22234L11.7689 1.68457L14.3911 4.35123L12.8889 5.88901Z"
fill="white" />
</svg>
</i>
Edit
</a>
</div>
<div class="right">
<a href="#" data-toggle="modal" data-target="#disclaimer">
Learn More <i class="icon">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M5.40002 4.20001H6.60002V3.00001H5.40002V4.20001ZM6.00002 10.8C3.3534 10.8 1.2 8.64665 1.2 5.99999C1.2 3.3534 3.3534 1.2 6.00002 1.2C8.64663 1.2 10.8 3.3534 10.8 5.99999C10.8 8.64665 8.64663 10.8 6.00002 10.8ZM6.00002 0C2.6862 0 0 2.6862 0 5.99999C0 9.31385 2.6862 12 6.00002 12C9.31383 12 12 9.31385 12 5.99999C12 2.6862 9.31383 0 6.00002 0ZM5.40002 8.99999H6.60002V5.39998H5.40002V8.99999Z"
fill="white" />
</svg>
</i>
</a>
</div>
</div>
</div>
</div>
<div class="details_steps">
<ul>
<li>
<h4>
<i class="inactive"><span>1</span></i> Personal
</h4>
<p></p>
</li>
<li>
<h4>
<i class="inactive"><span>2</span></i> Work
</h4>
</li>
<li>
<h4>
<i class="inactive"><span>3</span></i> Additional Info
</h4>
</li>
<li>
<h4>
<i class="inactive"><span>4</span></i> Bank
</h4>
</li>
<li>
<h4>
<i class="inactive"><span>5</span></i> Documents
</h4>
</li>
</ul>
</div>
</div>`,
data() {
return {
LoanAmount: null,//localStorage.getItem("loanAmount"),
LoanTenure: null,//localStorage.getItem("loanTenure"),
RepaymentType: null,//localStorage.getItem("repaymentType"),
Repayment: null //localStorage.getItem("repayment") * (0.04)
}
},
mounted() {
this.$root.$on('msg_from_loancalc', LoanDetails => {
this.LoanAmount = LoanDetails.a;
this.LoanTenure = LoanDetails.b;
this.RepaymentType = LoanDetails.c;
this.Repayment = LoanDetails.d;
});
console.log("Message received from Loan calc Component", this.LoanAmount, this.LoanTenure, this.RepaymentType, this.Repayment);
}
})
如果您能为我提供新的vue.js的帮助，我将不胜感激。