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

好像我正在播放的数据无法正常反应，但我无法弄清楚它是什么。在给定的示例中，Parent（root）按预期工作，但在用户填写一些数据后，子项仅稍微有效。即使填写后它也无法正常工作（语言选择没有值切换）

可能我已经跳过了手册中的一个重要部分。如果有人能告诉我这里我做错了什么我会非常感激。

Answer 1

我不应该在我的孩子组件上使用广播而是使用道具。现在就开始工作了。

VueJS父母/子女沟通 - 本地化

1 个答案: