Vuejs2 如何将数据从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;

        });
    }

});

this.eventHub.$on成功输出传入的make值。我要做的是将其发送到ModelComponent，以便它可以使用make变量从ajax调用中重新加载select输入数据

以下是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>

模型
{{model.name}
导出默认值{
道具：{
“make”：“，
“模型”：{
“默认值”：”
}
},
数据：函数（）{
返回{
组件制造：''，
组件模型：“”，
模型：{}
};
},
已创建：函数（）{
console.log（'fig-model-dropdown Component ready'）；
如果（这个。制造）{
console.log（'MAKE'，this.MAKE）；
this.componentMake=this.make；
这是fetchModelsByMake（）；
}
如果（此.model）{
this.componentModel=this.model；
}
},
方法：{
fetchModelsByMake:function（）{
this.$http.get（'/api/make/models/'+this.make）。然后(
功能（型号）{
this.models=models.body；
//console.log（'MODEL'，this.MODEL）；
}，函数（错误）{
//处理错误
}
);                  
}
}
}

---

使用这段代码，我没有得到任何错误，但是没有明显的迹象表明ModelComponent已经收到了它。现在我如何将make传递到modelscomponent并重建select？

这似乎是因为您的

this

在

fetchModelsByMake

方法中没有指向正确的范围。在“this.$http”调用中，此操作的范围将发生变化，因此您只需执行以下操作：

        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）； }，函数（错误）{ //处理错误 } );

---

您也可以看看我的类似答案。

谢谢，但我认为该函数甚至不会被调用，因为console.log（未注释时）不会产生任何结果。也就是说，我会把你的建议留到它真正起作用的时候。谢谢