如何在 Vue.js 中的组件之间传输数据？答案

【问题标题】：How to transfer data between components in Vue.js?如何在 Vue.js 中的组件之间传输数据？
【发布时间】：2019-06-24 12:23:42
【问题描述】：

我正在尝试将数据从我的主要 vue js 传输到 vue 组件。我的项目是用 laravel 构建的。我有主要适用于 vue 的 app.js。并且还有其他组件。我想在它们之间传输数据。
请检查我的代码。

这是我的 app.js

require('./bootstrap');
import Vue from "vue";
import VueResource from 'vue-resource'

Vue.use(VueResource);
Vue.http.headers.common['X-CSRF-TOKEN'] = $('input[name="csrf-token"]').attr('value');

Vue.component('google-map', require('./components/GoogleMap.vue'));

const app = new Vue({
    el: '#app',
    data: {
        lat: 0,
        lng: 0,
        center: { lat: 45.508, lng: -73.587 },
    },
    created(){
        this.lat = 34.20;
        this.lng = 100.36; 
        this.setCenter();
    },
    methods: {
        setCenter(){
            this.center.lat = parseFloat(this.lat);
            this.center.lng = parseFloat(this.lng);
        }
    }
});

这是我的 GoogleMap.vue

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      center: { lat: 45.508, lng: -73.587 },
    };
  },

  mounted() {
    this.centerFun();
  },

  methods: {
    centerFun(){
        console.log(this.center);
    }
  }
};
</script>

这是我的map.php

<html>
<head>
    <title>Map</title>
</head>
<body>
    <div id="app">

        <label>Lat</label><input type="text" name="" v-model="lat" @keyup="testFun">
        <label>Lng</label><input type="text" name="" v-model="lng" @keyup="testFun">

        <google-map></google-map>
    </div>

    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

您可以看到有两个“中心”变量。
我可以将它们绑定到一个吗？或者我能做什么？
如果我有多个组件，如何将数据从 app.js 传输到这些组件或将这些组件传输到 app.js？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

将 GoogleMap.vue 更新为：

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "GoogleMap",
  props: ['center'],
  data() {
    return {
      // center: { lat: 45.508, lng: -73.587 },
    };
  },

  mounted() {
    // this.centerFun();
  },

  methods: {
    //centerFun(){
    //    console.log(this.center);
    //}
  }
};
</script>

...这样它就可以接受来自父组件的center prop。然后将中心从您的父组件发送到 googlemap 组件，如下所示：

<google-map :center="center"></google-map>

正如@AlxTheRed 提到的，有关道具如何工作的更多信息可以在以下位置找到：

https://vuejs.org/v2/guide/components-props.html

【讨论】：

更多关于 Vue 中 props 的信息可以在这里找到：vuejs.org/v2/guide/components-props.html
很高兴我能帮上忙 :)

【解决方案2】：

您可以通过 props 将值从父组件传递给子组件。

【讨论】：

【解决方案3】：

从父组件中声明你想要的变量为子组件中的props。

在父组件中，您将包含子组件：

<child-comp var1="abc" :var2="xyz"></child-comp>

在子组件的实例中，将这些声明为道具：

props: ['var1','var2'],

现在，在子组件中，您可以直接访问它们：

this.var1

在这里阅读更多： https://vuejs.org/v2/guide/components.html

【讨论】：

这是否通过引用传递？如果您更新一个组件中的值，它是否会返回到父组件以及已被赋予该变量的其他组件？
你应该避免这样做。如果你在子组件中改变了一个 prop，它将在父组件重新加载或更改 prop 值时改回。
所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，反之则不会。此外，JavaScript 中的对象和数组是通过引用传递的，因此如果 prop 是数组或对象，则在子组件内改变对象或数组本身会影响父状态。 vuejs.org/v2/guide/components-props.html

【解决方案4】：

如果你的结构包含很多依赖，我建议你使用vuex。

【讨论】：