Question

我试图将数据从我的主要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？

Answer 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道具。然后将中心从您的父组件发送到googlemap组件，如下所示：

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

如@AlxTheRed所述，可以在以下位置找到有关道具工作方式的更多信息：

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

Answer 2

您可以通过prop将值从父组件传递到子组件。

Answer 3

在子组件中将要从父组件中声明的变量声明为 props 。

在父组件中，您将在其中包括子组件：

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

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

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

现在，在子组件中，您可以通过以下方式直接访问它们：

this.var1

在此处了解更多信息： https://vuejs.org/v2/guide/components.html

Answer 4

如果您的结构包含许多依赖项，建议您使用vuex。

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

4 个答案: