Как передавать данные между компонентами в Vue.js? - PullRequest
Новая
       6

Как передавать данные между компонентами в Vue.js?

0 голосов
/ 31 января 2019

Я пытаюсь перенести данные из моего основного vue js в компонент vue.Мой проект построен с Laravel.У меня app.js, который в основном работает на VUE.А также есть другие компоненты.Я хотел бы передавать данные между ними.
Пожалуйста, проверьте мой код.

Это мой 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?

Ответы [ 4 ]

0 голосов
/ 31 января 2019

Если ваша структура содержит много зависимостей, я предлагаю вам использовать vuex .

0 голосов
/ 31 января 2019

Обновите 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

0 голосов
/ 31 января 2019

Объявите переменные, которые вы хотите от родительского компонента, как реквизит в дочернем компоненте.

В родительском компоненте, где вы включаете свой дочерний компонент: 

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

В экземпляре дочернего компонента объявите их как реквизиты: 

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

Теперь в дочернем компоненте вы можете напрямую обращаться к ним как: 

this.var1

Подробнее здесь: https://vuejs.org/v2/guide/components.html

0 голосов
/ 31 января 2019

Вы можете передавать значения из родительского компонента в дочерний компонент через реквизиты.

...