Vue.js中如何将app.js中的值传递至Vue组件文件

嘿，我来帮你搞定把gtotal从根Vue实例传递到orderForm.vue的问题～结合你已经初始化了EventBus的情况，这里有两种实用的方案，你可以根据自己的场景选：

方法1：利用你已经设置的EventBus传递数据 #

这种方法适合组件层级比较深、或者组件不是直接作为根实例子组件的场景，灵活性很高。

首先修改你的根实例代码，在gtotal值变化时通过EventBus广播事件：

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
    },
    watch: {
        // 监听gtotal的变化，一旦更新就广播给其他组件
        gtotal(newTotal) {
            window.EventBus.$emit('gtotal-updated', newTotal);
        }
    },
    created() {
        // 如果gtotal在页面初始化时就有值，这里可以先广播一次初始值
        window.EventBus.$emit('gtotal-updated', this.gtotal);
    }
})

然后在orderForm.vue里监听这个事件，接收并更新本地值：

<template>
  <!-- 你的表单内容，比如可以直接使用本地的total值 -->
  <div>订单总金额：{{ localTotal }}</div>
</template>

<script>
export default {
  data() {
    return {
      localTotal: 0 // 用本地变量存储接收的总金额
    };
  },
  created() {
    // 监听EventBus的事件，更新本地值
    window.EventBus.$on('gtotal-updated', (newTotal) => {
      this.localTotal = newTotal;
    });
  },
  beforeDestroy() {
    // 组件销毁前移除监听，避免内存泄漏
    window.EventBus.$off('gtotal-updated');
  }
};
</script>

方法2：通过Props传递数据（更符合Vue数据流规范） #

如果orderform组件是直接作为根实例的子组件渲染的（也就是在#app对应的HTML模板里写了<orderform>标签），用Props传递是更规范的做法，符合Vue单向数据流的原则。

首先在orderForm.vue里定义接收的Props：

<template>
  <!-- 直接使用props里的gtotal即可 -->
  <div>订单总金额：{{ gtotal }}</div>
</template>

<script>
export default {
  props: {
    gtotal: {
      type: Number, // 指定类型为数字
      default: 0    // 默认值设为0
    }
  }
};
</script>

然后在根实例对应的HTML模板里（比如你的页面中#app容器内部），给orderform组件绑定gtotal属性：

<div id="app">
  <!-- 其他组件 -->
  <products></products>
  <orders></orders>
  <!-- 绑定根实例的gtotal到组件的props -->
  <orderform :gtotal="gtotal"></orderform>
</div>

这样根实例里的gtotal一旦更新，orderForm.vue里的props值会自动同步，非常省心。

内容的提问来源于stack exchange，提问作者user8531037