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

我不應該使用廣播，而是在子組件上使用道具。 現在工作了。