Vue.js 在vue-i18n中的子组件中使用基于组件的翻译

我正在使用翻译vue应用程序中的消息。我在

new VueI18n（…）

中添加了一些全局翻译，在名为

c-parent

的组件中添加了一些基于组件的翻译。该组件包含名为

c-child

的子组件。现在，我想在

c-child

中使用

c-parent

的基于组件的翻译

我在这把小提琴上举了一个小例子：

问题出现在输出的最后一行：

c-child

中的消息没有使用

c-parent

的基于组件的翻译进行翻译

---

由于所有组件都“继承”了全局转换，因此我希望基于组件的转换（在其各自的组件子树中）也是如此。在vue-i18n中有没有实现这一点的方法？

好吧，您需要使用道具将文本传递给子组件

全局翻译由所有组件“继承”。但你在儿童中使用的是本地翻译

const globalMessages={
en:{global:{title:'Vue i18n:基于组件的翻译的使用'}}
}
常量组件本地消息={
en:{本地：{
标题：“我是一个翻译的标题”，
文本：“我是翻译文本”
}}
}
Vue.组件（“c-父级”{
i18n：{
消息：componentLocalMessages
},
模板：`
基于c父组件的转换：{{$t（'local.title'）}
`
})
Vue.组件（“c-child”{
道具：['text']，
模板：`
c-child翻译：{{text}
`
})
Vue.component（'应用程序'{
模板：“”
})
常数i18n=新VueI18n({
地区：'en'，
消息：globalMessages
})
新Vue({
i18n，
el:“应用程序”，
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
}
h5{
边缘：1米0.5米0；
}

{{$t（'global.title'）}
我们定义了两个Vue组件：
c-child/
包含在
c-parent/
中。
c-parent/
定义了一些基于组件的翻译。我们想使用
父项在子项中的翻译，但不起作用。
例子：

嗯，您需要使用道具将文本传递给子组件

全局翻译由所有组件“继承”。但你在儿童中使用的是本地翻译

const globalMessages={
en:{global:{title:'Vue i18n:基于组件的翻译的使用'}}
}
常量组件本地消息={
en:{本地：{
标题：“我是一个翻译的标题”，
文本：“我是翻译文本”
}}
}
Vue.组件（“c-父级”{
i18n：{
消息：componentLocalMessages
},
模板：`
基于c父组件的转换：{{$t（'local.title'）}
`
})
Vue.组件（“c-child”{
道具：['text']，
模板：`
c-child翻译：{{text}
`
})
Vue.component（'应用程序'{
模板：“”
})
常数i18n=新VueI18n({
地区：'en'，
消息：globalMessages
})
新Vue({
i18n，
el:“应用程序”，
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
}
h5{
边缘：1米0.5米0；
}

{{$t（'global.title'）}
我们定义了两个Vue组件：
c-child/
包含在
c-parent/
中。
c-parent/
定义了一些基于组件的翻译。我们想使用
父项在子项中的翻译，但不起作用。
例子：

我正在使用

router.ts

为每条路由合并一个特定的

.i18n.json

翻译文件（通过设置

meta.i18n

属性）：

const路由器=新路由器({
[...]
{
路径：'/settings'，
名称：'设置'，
组件：（）=>导入（'./views/Settings.vue'），
元：{
i18n:require（'./views/Settings.i18n.json'），
},
},
[...]
});
路由器.beforeach（（到、从、下一个）=>{
//加载视图范围的翻译？
如果（！！到.meta.i18n）{
Object.keys（to.meta.i18n）.forEach（（lang）=>i18n.mergeLocaleMessage（lang，to.meta.i18n[lang]）；
}
next（）；
});

Settings.i18n.json

类似于：

{
    "en": 
    {
        "Key": "Key"    
    },
    "es": 
    {
        "Key": "Clave"    
    }
}

这样，所有子组件都将使用相同的转换文件

如果你不能使用vue路由器，也许你可以在父组件的钩子中使用它（还没有尝试过）

我所做的是在

router.ts

中使用合并特定的

.i18n.json

翻译文件（通过设置

meta.i18n

属性）来为每条路由：

const路由器=新路由器({
[...]
{
路径：'/settings'，
名称：'设置'，
组件：（）=>导入（'./views/Settings.vue'），
元：{
i18n:require（'./views/Settings.i18n.json'），
},
},
[...]
});
路由器.beforeach（（到、从、下一个）=>{
//加载视图范围的翻译？
如果（！！到.meta.i18n）{
Object.keys（to.meta.i18n）.forEach（（lang）=>i18n.mergeLocaleMessage（lang，to.meta.i18n[lang]）；
}
next（）；
});

Settings.i18n.json

类似于：

{
    "en": 
    {
        "Key": "Key"    
    },
    "es": 
    {
        "Key": "Clave"    
    }
}

这样，所有子组件都将使用相同的转换文件

---

如果您不能使用vue router，也许您可以在父组件的钩子中使用它（还没有尝试过）

这是一个解决方案，但恐怕它不能很好地扩展到多个消息。谢谢你这么快回答！我想，为了更好地扩展它，您可以在根级别定义语言，并在其自身定义组件数据。您可以通过对象传递少量消息。我正在一个更大的SPA中使用它，其中每个页面都是顶级组件。我希望我可以在这个顶级组件中拥有一个页面的所有翻译，并在组成页面的所有子组件中使用它们，而无需通过tran