VueJS parent/child 通信 - 本地化

Question

我正在开发本地化应用程序，其中根组件检索可在整个应用程序中使用的所有可用语言环境。在获取区域设置后，它将广播此数据。

我的子组件在使用这些语言环境时遇到了一些问题。我制作了一个小 fiddle 显示 some/most 我的问题：https://jsfiddle.net/718thn9o/（子模板与父模板几乎相同 - 抱歉这种丑陋的格式）

VueJS代码（在jsfiddlelink上可以看到）

var Child = Vue.extend({
    data : {
    selectedLanguage : '',
    locales : [],
    someObject : {
      someValue : {}
    }
  },
  template: '<article><h3>[Child] - strange behaviour:</h3><select v-model="selectedLanguage"><option  v-for="locale in locales" v-bind:value="locale.locale">{{locale.display_name}}</option></select><br /><input v-model="someObject.someValue[selectedLanguage]"/><br /><div v-for="locale in locales">{{ locale.display_name}} : {{someObject.someValue[locale.locale]}}</div></article>',
  events: {
    set_locales : function(data) {
        this.locales = data;
      this.selectedLanguage = data[0]['locale'];
  }
}
});

var vm = new Vue({
    el: '#app',
    data: {
        selectedLanguage: 'nl-NL',
        locales : [
        {
            locale: 'nl-NL',
            display_name: 'Nederlands'
        },
        {
           locale: 'en-NL',
           display_name: 'English'
        }],
        someObject : {
            someValue : {}
         },
     },
     ready : function(){
        this.$broadcast('set_locales', this.locales);
     },

     components : {
        'my-component': Child
     },
})

我正在广播的数据似乎无法正常响应，但我无法弄清楚它是什么。在给定的示例中，父级（root）按预期工作，但子级在用户填写一些数据后仅略微工作。即使在填写后它也无法正常工作（语言上没有值切换select）

我可能跳过了手册中的一个重要部分。如果有人能告诉我我在这里做错了什么，我将不胜感激。

Answer 1

我不应该在我的子组件上使用 broadcast 而是 props。现在可以使用了。

VueJS parent/child 通信 - 本地化

VueJS parent/child communication - localization

javascript

parent-child

vue.js