如何在Vue Js中將值表單app.js傳遞到Vue文件

Question

這是我的app.js，它的價值越來越高 。 我想將此值傳遞給我的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);
    });
  }
});

在orderForm.vue中，我想將其分配給輸入字段值，以便將其保存到數據庫。

<template>
  <input type="hidden" value="gtotal">
</template>

Answer 1

由於已經設置了事件總線，因此可以在具有訂單形式的組件中偵聽openOrderForm ：

<template>
  ...
    <order-form :gtotal="gtotal"></order-form>
  ...
</template>

export default {
  data () {
    return {
      gtotal: 0
    }
  },
  created () {
    EventBus.$on('openOrderForm',(total)=>{
      this.gtotal = total;
    })
  }
}

您的訂單只需要一個prop就gtotal ：

// orderForm.vue

<template>
  <input type="hidden" :value="gtotal">
</template>

export default {
  props: ['gtotal']
}