Vue 인스턴스에서 구성 요소로 데이터를 전달하는 방법

Vue 인스턴스에서 구성 요소로 데이터를 전달하는 방법

우선 나는 이 일에 몇 시간을 보냈다고 말해야 한다. 그래서 내가 어리석고 간단한 것을 간과했다면 나는 사과해야 한다.

나는 루트 Vue 인스턴스를 통해 한 구성 요소가 다른 구성 요소와 대화하도록 하려고 한다.지금까지 MakeComponent가 아래와 같이 루트 인스턴스에 메시지를 보내도록 했다.

const eventHub = new Vue() // Single event hub

// Distribute to components using global mixin
Vue.mixin({
    data: function () {
        return {
            eventHub: eventHub
        }
    }
});

Vue.component('fig-make-dropdown', require('./components/FigMakeDropdown.vue'));
Vue.component('fig-model-dropdown', require('./components/FigModelDropdown.vue'));

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */
const app = new Vue({
    el: '#app',

    data: function() {
        return {
            makes: {},
            make: '',
            componentMake: ''
        };
    },

    mounted() {
        this.eventHub.$on('broadcast_make', data => {
            // do your thing
            console.log('parent', data);
            this.make = data;

        });
    }

});

이.이벤트허브.$on은 전달된 투입 가치를 성공적으로 출력한다.ModelComponent로 전송하여 변수를 만드는 방법을 사용하여 아약스 호출의 데이터로 선택한 입력을 다시 로드할 수 있도록 하십시오.

여기 html 조각이 있다.

<fig-model-dropdown v-bind:make="make" make="{{ $value->make_id }}" model="{{ $value->model_id }}"></fig-model-dropdown>

여기 ModelComponent가 있다.

<template>
    <div>
        <label for="make_model_id">Model</label>
        <select id="make_model_id" name="make_model_id" class="form-control" v-model="componentModel">
            <option value=""></option>
            <option :value="model.id" v-for="model in models">{{ model.name }}</option>
        </select>
    </div>
</template>

<script>
    export default {

        props: {
            'make':'',
            'model': {
                'default': ''
            }
        },

        data: function() {
            return {
                componentMake: '',
                componentModel: '',
                models: {}
            };
        },

        created: function() {
            console.log('fig-model-dropdown Component ready.');
            if(this.make) {
                console.log('MAKE', this.make);
                this.componentMake = this.make;
                this.fetchModelsByMake();
            }
            if(this.model) {
                this.componentModel = this.model;
            }
        },

        methods: {
            fetchModelsByMake: function() {
                this.$http.get('/api/make/models/' + this.make ).then(
                    function (models) {
                        this.models = models.body;
//                      console.log('MODEL', this.model);
                    }, function (error) {
                            // handle error
                    }
                );                  
            }
        }

    }
</script>

이 코드로 나는 오류는 없지만 ModelComponent가 그것을 받았다는 명백한 징후는 없다.이제 어떻게 make를 ModelComponent에 전달하고 선택 항목을 다시 작성해야 하는가?

이런 일이 일어나는 건 네 덕분인 것 같아.this올바른 범위를 가리키지 않는 경우fetchModelsByMake방법. 이것의 범위는 '이것' 안에서 변할 것이다.그러니 그냥 다음과 같은 일을 하면 된다.

        fetchModelsByMake: function() {
            var self = this
            this.$http.get('/api/make/models/' + this.make ).then(
                function (models) {
                    self.models = models.body;

// console.log('MODEL', this.MODEL'); }, 함수(오류) { // 핸들 오류 };

여기서도 나와 비슷한 대답을 볼 수 있다.

참조URL: https://stackoverflow.com/questions/41092305/how-to-pass-data-from-vue-instance-to-component