VueJS 父/子通信 - 本地化

Question

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

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

VueJS 代码（可以在 jsfiddle 链接上看到）

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
     },
})

似乎我正在广播的数据无法正常响应，但我无法弄清楚它是什么。在给定的示例中，父（根）按预期工作，但在用户填写一些数据后，子仅稍微工作。而且即使填写后也不能正常工作（语言选择上没有值开关）

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

Answer 1

我不应该在我的子组件上使用广播，而是使用道具。现在可以使用了。