Asp.net mvc 如何在两个vue js组件之间传递数据
我正在使用vue.js构建一个应用程序该应用程序基本上有两个js文件。第一个用作登录页上的引用，而另一个用于后端。我需要在这些组件之间进行通信。我最初使用localStorage将数据从登录页传递到另一个内部页，但决定像这样使用事件总线Asp.net mvc 如何在两个vue js组件之间传递数据,asp.net-mvc,vue.js,Asp.net Mvc,Vue.js,我正在使用vue.js构建一个应用程序该应用程序基本上有两个js文件。第一个用作登录页上的引用，而另一个用于后端。我需要在这些组件之间进行通信。我最初使用localStorage将数据从登录页传递到另一个内部页，但决定像这样使用事件总线 Vue.component('loan-calc', { template: `<div class="row calc-holder" data-aos="fade-up" data-aos-delay="800">
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-calc'{
模板：`
贷款金额
你要拿多少
贷款期限
你要多久才能完全还清
偿还
每月支付的金额
12,580
每月
还款类型
选择您希望如何重播贷款
直接借记委托书
支票
现金
不需要抵押品
`,
数据（）{
返回{
LoanAmount:null，
loanture:null，
还款类型：null，
还款：空
}
},
道具：{
_LoanAmount：这个，LoanAmount，
_这个，这个，这个，
_还款类型：此为。还款类型，
_还款：这个。还款
},
方法：{
getEstimatedLoanCal:函数（）{
如果（this.LoanAmount！=null）{
//创建一个在组件之间共享数据的事件总线
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.component（'loan-overview'{
模板：`
你的贷款
₦{{LoanAmount}}
贷款期限
{{loanture}}个月
偿还
每月{{LoanAmount}}
还款类型
{{returnmenttype}
-
1个人
-
2工作
-
3其他信息
-
4银行
-
5文件
`,
数据（）{
返回{
LoanAmount:null，//localStorage.getItem（“LoanAmount”），
loanture:null，//localStorage.getItem（“loanture”），
还款类型：null，//localStorage.getItem（“还款类型”），
还款：null//localStorage.getItem（“还款”）*（0.04）
}
},
安装的（）{
this.$root.$on（'msg\u from\u loancalc'，LoanDetails=>{
this.LoanAmount=loandDetails.a；
this.loantenue=loandDetails.b；
this.returnmentType=loandDetails.c；
这个。还款=贷款明细。d；
});
console.log（“从贷款计算组件接收到的消息”、this.LoanAmount、this.loanture、this.returnmenttype、this.returning）；
}
})
如果您能提供帮助，我将不胜感激，因为我是vue.js新手乍一看，您的日志超出了eventHandler的范围。首先将
mounted（）this.$root.$on（'msg_from_loancalc'，LoanDetails=>{console.log（“从Loan calc组件收到的消息”，this.LoanAmount，this.loanture，this.returnementType，this.returning）；this.LoanAmount=LoanDetails.a；this.loantenue=LoanDetails.b；this.returnmenttype=LoanDetails.c；this.returnation=LoanDetails.d；}）template:“#templateName”templateName