[英]How to Pass Value Form app.js to Vue File In Vue Js
This is my app.js and it is getting value gtotal . 这是我的app.js,它的价值越来越高 。 I want to pass this value to my orderForm.vue file and I am not to do that.
我想将此值传递给我的orderForm.vue文件,但我不这样做。
require('./bootstrap');
window.Vue = require('vue');
window.EventBus = new Vue();
Vue.component('products', require('./components/products.vue'));
Vue.component('orders', require('./components/orders.vue'));
Vue.component('orderform', require('./components/orderForm.vue'));
const app = new Vue({
el: '#app',
data: {
viewOrderForm: false,
gtotal: 0
},
created() {
EventBus.$on('openOrderForm', (total) => {
this.viewOrderForm = true;
this.gtotal = total;
console.log(this.gtotal);
});
}
});
In orderForm.vue, I want to assign it to the input field value so that I can save it to the Database. 在orderForm.vue中,我想将其分配给输入字段值,以便将其保存到数据库。
<template>
<input type="hidden" value="gtotal">
</template>
Since you've got an event bus set up, you can listen for openOrderForm
in the component which has the order form: 由于已经设置了事件总线,因此可以在具有订单形式的组件中侦听
openOrderForm
:
<template>
...
<order-form :gtotal="gtotal"></order-form>
...
</template>
export default {
data () {
return {
gtotal: 0
}
},
created () {
EventBus.$on('openOrderForm',(total)=>{
this.gtotal = total;
})
}
}
Your order form would just need a prop
for gtotal
: 您的订单只需要一个
prop
就gtotal
:
// orderForm.vue
<template>
<input type="hidden" :value="gtotal">
</template>
export default {
props: ['gtotal']
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.