У меня есть компонент формы, где я использую дочерний компонент. Я хочу использовать данные из дочернего компонента в родительском.

Мой компонент в HTML:

<candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>

Тогда вот экземпляр Vue:

Кандидат Form.vue

<template>
<div class='row'>

    <div class='form-group'>
        <label>Name:</label>
        <input type='text' class='form-control' v-model='name'>
    </div>
    <div class='form-group'>
        <location-input></location-input>
    </div>

    <button class='btn btn-primary'>{{buttontext}}</button>
</div>
</template>
<script>
    export default {
        data() {
            return {}
        },

        props: ['endpoint', 'buttontext'],

        ready() {}
    }
</script>

Я использую там компонент locationInput, и он красиво отображается на экране. Этот компонент реализует функциональность заголовка Google Maps для поля ввода и выглядит следующим образом:

< Сильный > LocationInput.vue

<template>

    <place-input
            :place.sync="placeInput.place"
            :types.sync="placeInput.types"
            :component-restrictions.sync="placeInput.restrictions"
            class='form-control'
            label='Location: '
            name='location'
    ></place-input>

    <pre>{{ placeInput.place | json }}</pre>

</template>

<script>
    import { PlaceInput, Map } from 'vue-google-maps'

    export default {

        data() {
            return {
                placeInput: {
                    place: {
                        name: ''
                    },
                    types: [],
                    restrictions: {'country': 'usa'}
                }
            }
        },
        props: ['location'],

        components: {
            PlaceInput
        },
        ready() {
        }
    }
</script>
<style>
    label { display: block; }
</style>

Я хочу передать name значение и информацию из placeInput.place на сервер.

Я регистрирую оба компонента в моем основном файле приложения следующим образом:

Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));

const app = new Vue({
    el: 'body'
});

Как передать данные placeInput.place из компонента ввода местоположения в компонент формы кандидатов?

Я хочу отправить placeInput.place и данные имени из компонента кандидата в форму на сервер, скорее всего, используя vue-ресурс.

1
Connor Leech 12 Янв 2017 в 22:58

3 ответа

Лучший ответ

Эй, нет необходимости в магазине или Vuex. Передайте данные, используя реквизит!

Окончательное решение.

Шаблон лезвия:

@extends('layouts.app')

@section('content')
    <div class='col-md-6 col-md-offset-3'>
        <h1>Add New Candidate</h1>
        <hr>
        <candidates-form endpoint='/candidates/create' buttontext='Add Candidate'></candidates-form>
    </div>
@stop

Родительский компонент Vue:

<template>
<div>
    <div class='form-group'>
        <label>Name:</label>
        <input type='text' class='form-control' v-model='name'>
    </div>

    <div class='form-group'>
        <location-input :location="locationData"></location-input>
    </div>

    <button class='btn btn-primary'>{{buttontext}}</button>

    <pre>{{ locationData | json }}</pre>
</div>
</template>

<script>
export default {
    data() {
        return {
            locationData: {
                place: {
                    name: ''
                },
                types: [],
                restrictions: {'country': 'usa'}
            }
        }
    },
    props: ['endpoint', 'buttontext']
}
</script>

Дочерний компонент Vue:

<template>
    <place-input
            :place.sync="location.place"
            :types.sync="location.types"
            :component-restrictions.sync="location.restrictions"
            class='form-control'
            label='Location: '
            name='location'
    ></place-input>
</template>

<script>
    import { PlaceInput, Map } from 'vue-google-maps'

    export default {
        props: ['location'],
        components: {
            PlaceInput
        }
    }
</script>
<style>
    label { display: block; }
</style>

Aaaa и общий файл app.js (это внутри приложения Laravel 5.3)

import { load } from 'vue-google-maps'

load({
  key: '<API_KEY>',
  v: '3.24',             // Google Maps API version
  libraries: 'places',   // for places input
});

Vue.component('locationInput', require('./components/LocationInput.vue'));
Vue.component('candidatesForm', require('./components/CandidatesForm.vue'));
Vue.component('company-list', require('./components/CompanyList.vue'));

const app = new Vue({
    el: 'body'
});

Эта статья из alligator.io также помогла мне и в упрощении. Я думал об этом!

Приветствуйте @GuillaumeLeclerc для компонента vue-google-maps: https://github.com/ GuillaumeLeclerc / вю - Google - карты

1
Connor Leech 29 Янв 2017 в 16:22

Я бы рекомендовал подход к хранилищу данных, который приведен в документации VueJS здесь: https: // vuejs .org / v2 / руководство / состояние management.html

По сути, у вас есть файл store.js, который экспортирует объект данных для вашего приложения. Этот объект данных используется всеми вашими компонентами.

Со страницы, указанной выше:

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

И если вам нужно, чтобы компоненты имели частное состояние вместе с общим состоянием:

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
0
iamjpg 12 Янв 2017 в 20:06

Ознакомьтесь с моим ответом здесь VueJS доступ к данным дочернего компонента из родительского, довольно те же вопросы.

Если вы работаете с крупномасштабным приложением, лучше всего использовать Vuex, это избавит вас от многих неприятностей.

В противном случае, если это не приложение с ошибками, тогда вы можете использовать мой подход или использовать шину событий.

0
Community 23 Май 2017 в 11:53