Javascript 如何将VueI18n用于基于组件实例的国际化？

我正在构建Vue应用程序而不使用npm。由于参考npm的指南太多，我无法正确地遵循它们。所以，我只包括如下脚本：

    <script src="/js/bluebird.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-i18n.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/components.js"></script>
    <script src="/js/app.js"></script>

这里我在创建组件时读取json文件，所以当创建bigButton时，

button

属性将包含所有必需的信息。 bigButton组件代码：

Vue.component('buttons-list', {
    data: function() {
        return {
            buttons: []
        }
    },
    created: function() {
        this.loadButtons()
    },
    methods: {
        loadButtons: function() {
            const list = this;
            axios.get('/json/buttons.json')
            .then(function(response) {
                list.buttons = response.data
            })
        }
    }
})

Vue.component('big-button', {
    data: function() {
        return {
            text: ''
        }
    },
    props: ['button'],
    created: function() {            
        this.$i18n.setLocaleMessage('en', this.button.messages.en)
        this.$i18n.setLocaleMessage('ru', this.button.messages.ru)
    },
    i18n: {
        messages: {}
    }
})

在这里，在

created

函数中，我试图将实例的

i18n.messages

设置为json文件中的数据。基本上，这是可行的，只是它会将所有按钮的

消息

重置为当前数据，最终所有按钮都具有相同的最后一个按钮文本。 是否可以在vue-i18n中使用组件实例？还是有其他我错过的方式

---

解决方案

我已将我的

bigButton

组件代码更改为：

Vue.component('big-button', {
    data: function() {
        return {
            text: ''
        }
    },
    props: {
        button: {
            type: Object,
            default: function() {return {}}
        },
    },
    created: function() {
        this.$i18n.setLocaleMessage('en', this.button.messages.en)
        this.$i18n.setLocaleMessage('ru', this.button.messages.ru)
    },
    i18n: {
        //i18n stops working when this block removed
    }
})

---

成功了

VueI18n支持每个组件的本地化-在 只需在组件中定义带有消息的

i18n

对象-文档准确地展示了如何执行此操作：

// setup locale info for root Vue instance
const i18n = new VueI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはようございます'
      }
    }
  }
})

// Define component
const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: {
      en: { message: { hello: 'hello component1' } },
      ja: { message: { hello: 'こんにちは、component1' } }
    }
  }
}

// template
<div id="app">
  <p>{{ $t("message.hello") }}</p>
  <component1></component1>
</div>

//为根Vue实例设置区域设置信息
常数i18n=新VueI18n({
地区：'ja'，
信息：{
嗯:{
信息：{
你好：“你好，世界”，
问候语：“早上好”
}
},
ja:{
信息：{
你好：'こんにちは、世界',
问候：'おはようございます'
}
}
}
})
//定义组件
常量组件1={
模板：`
组件1区域设置消息：{{$t（“message.hello”）}

回退全局区域设置消息：{{$t（“message.greeting”）}

`,
i18n:{/`i18n`选项，设置组件的区域设置信息
信息：{
en:{message:{hello:'hello component1'}}，
ja:{留言：{你好：'こんにちは、组件1'}}
}
}
}
//模板
{{$t（“message.hello”）}

更新 如何使用唯一的本地化字符串初始化组件：

const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: uniqueLocalization
  },
  props:
  {
    uniqueLocalization:
    {
      type: Object,
      default: () => ({})
    }
  }
}

<template>
  <div>
    <comp :unique-localization="locale_1"/>
    <comp :unique-localization="locale_2"/>
    <comp :unique-localization="locale_3"/>    
  </div>
</template>

<script>
import component1 from '@/components/component1.vue'

export default
{
  components:
  {
    comp: component1
  },
  data()
  {
    return {
      locale_1:
      {
        en:
        {
          message:
          {
            hello: 'Greetings',
            bye: 'Farewell'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет',
            bye: 'До свидания'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Greetings, buddy',
            bye: 'Farewell, dude'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет, ребята',
            bye: 'До свидания, мужики'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Godd day, team',
            bye: 'Bye-bye, darling'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Здравствуйте, братушки',
            bye: 'Пока'
          }
        }
      }
    };
  }
}
</script>

const组件1={
模板：`
组件1区域设置消息：{{$t（“message.hello”）}

回退全局区域设置消息：{{$t（“message.greeting”）}

`,
i18n:{/`i18n`选项，设置组件的区域设置信息
信息：独一无二的本地化
},
道具：
{
唯一本地化：
{
类型：对象，
默认值：（）=>（{}）
}
}
}
从“@/components/component1.vue”导入组件1
导出默认值
{
组件：
{
组件：组件1
},
数据（）
{
返回{
地区1：
{
嗯:
{
信息：
{
您好：'您好'，
再见：“再见”
}
},
ru:
{
信息：
{
您好：“ППцццц”，
拜拜：“аааааааааа”
}
}
},
地区3：
{
嗯:
{
信息：
{
你好：'你好，伙计'，
再见：“再见，伙计”
}
},
ru:
{
信息：
{
您好：“Пббб，Пбаааа”，
拜拜：“ббббжбббббббббб
}
}
},
地区3：
{
嗯:
{
信息：
{
您好：'天哪，团队'，
再见：“再见，亲爱的”
}
},
ru:
{
信息：
{
您好：'，
再见：“Паа”
}
}
}
};
}
}

假设我一次有10个

组件1

实例，哪一个的英文文本是“hello Component1”？我需要它们中的每一个都有不同的文本，每个组件的本地化没有帮助。它有帮助，但是你应该用不同的值初始化每个组件

i18n

对象-通过道具、AJAX或其他任何东西。或者，如果您坚持10个组件中的每一个都必须是唯一的，只需在10个不同的

.vue

文件中创建10个不同的组件，每个文件都有自己的本地化文本。这就是问题，如何使用不同的值初始化组件？我曾尝试编写

i18n:{messages:this.button.messages}

，但运气不佳。奇怪的是，它与

this.button.messages

不起作用，而是与

this.localization

一起工作。当通过

按钮将
消息直接传递到组件时，本地化可以使用
。谢谢你的帮助！这段代码起作用了，但不是以直接的方式。从json文件加载数据时，它不起作用，当然，我没有直接列出所有组件，只是通过
v-for
。看起来问题出在我试图将
props
作为数组传递时。当我将其更改为object（如本例所示）时，它就像一个符咒一样工作！
const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: uniqueLocalization
  },
  props:
  {
    uniqueLocalization:
    {
      type: Object,
      default: () => ({})
    }
  }
}

<template>
  <div>
    <comp :unique-localization="locale_1"/>
    <comp :unique-localization="locale_2"/>
    <comp :unique-localization="locale_3"/>    
  </div>
</template>

<script>
import component1 from '@/components/component1.vue'

export default
{
  components:
  {
    comp: component1
  },
  data()
  {
    return {
      locale_1:
      {
        en:
        {
          message:
          {
            hello: 'Greetings',
            bye: 'Farewell'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет',
            bye: 'До свидания'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Greetings, buddy',
            bye: 'Farewell, dude'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Привет, ребята',
            bye: 'До свидания, мужики'
          }
        }
      },
      locale_3:
      {
        en:
        {
          message:
          {
            hello: 'Godd day, team',
            bye: 'Bye-bye, darling'
          }
        },
        ru:
        {
          message:
          {
            hello: 'Здравствуйте, братушки',
            bye: 'Пока'
          }
        }
      }
    };
  }
}
</script>