如何在 Vue Js 中将值表单 app.js 传递给 Vue 文件答案

【问题标题】：How to Pass Value Form app.js to Vue File In Vue Js如何在 Vue Js 中将值表单 app.js 传递给 Vue 文件
【发布时间】：2018-09-29 13:03:00
【问题描述】：

这是我的 app.js，它正在获得价值 gtotal。我想将此值传递给我的 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>

【问题讨论】：

分享您的现场演示？
同意@C2486
@C2486。我没有现场演示，但我只想将 gtotal 值从 app.js 传递给 orderForm.vue。它也在控制台中显示该值。

标签： javascript laravel laravel-5 vue.js

【解决方案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']
}

【讨论】：

谢谢。 @DigitalDrifter。你解决了我的问题。非常感谢。