首页 > 其他分享 >vue中export default data()外面的数据如何通过$t获取动态值

vue中export default data()外面的数据如何通过$t获取动态值

时间:2023-08-21 15:24:36浏览次数:34  
标签:文件 vue const default Vue 实例 export i18n

如果将数据放到外面的`const`中,而不是在Vue组件的`data`选项中,那么无法直接通过`$t`方法来获取翻译文件的值。因为`$t`方法是Vue-i18n插件提供的实例方法,需要在Vue组件中使用。

如果你想在外部使用`$t`方法来获取翻译文件的值,可以将Vue-i18n的实例导出,并在外部文件中引入该实例来调用`$t`方法。

以下是一个示例,演示了如何在外部文件中通过引入Vue-i18n实例来使用`$t`方法:

```javascript
// i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
locale: 'zh-CN',
messages: {
'zh-CN': {
hello: '你好',
welcome: '欢迎'
},
'en-US': {
hello: 'Hello',
welcome: 'Welcome'
}
}
})

export default i18n
```

```javascript
// external.js
import i18n from './i18n'

const greeting = i18n.t('hello')
const message = i18n.t('welcome')

console.log(greeting) // 输出:你好
console.log(message) // 输出:欢迎
```

在上述示例中,我们首先在`i18n.js`文件中创建了Vue-i18n实例,并将其导出。然后,在`external.js`文件中通过引入该实例来调用`$t`方法,获取翻译文件的值。

这样,在外部文件中就可以通过引入Vue-i18n实例来使用`$t`方法,获取翻译文件的值。

标签:文件,vue,const,default,Vue,实例,export,i18n
From: https://www.cnblogs.com/xiao1993/p/17646075.html

相关文章

  • 在springboot项目中部署vue打包的dist以及刷新遇到404的解决方法
    一、在springboot项目中部署dist新建一个springboot项目,并将dist复制到resources目录下面,同时在application.yml添加配置即可,操作结果如下图所示: 添加的配置代码如下:spring:web:resources:static-locations:"classpath:/dist"二、部署好之后刷新遇到404......
  • 解决vueH5微信公众号扫一扫调用失败问题
    所使用的是importwxfrom'weixin-js-sdk'首先保证签名,域名配置等开发配置没有问题在开发工具当中显示没有问题一到真机测试就不行往下看      特别注意所需关键信息存在本地缓存中   ......
  • Vue 中请求同步执行解决方案
    有很多小伙伴在使用Vue的时候都会遇到一种情况,form表单修改回显时,某个下拉框里的内容回显乱码,这是因为Vue是的请求方法是异步请求:简单来说,form表单内容先获取了出来,而项目阶段的下拉框随后才获取出来//表单<el-col:span="12"> <el-form-item:label="$t('项目阶段')"prop=......
  • Web 国际化:新增越南语语系(vue i18n)
     前提:1.在src/locales文件夹中,新增vi.json文件背景:1.vue步骤:1.在main.js中,importVueI18nfrom'vue-i18n'Vue.use(VueI18n)consti18n=newVueI18n({locale:localStorage.getItem('lang')||'zh',messages:{ .........
  • Vue的组件data为什么必须是一个函数?
    vue中的data必须是函数是为了保证组件的独立性和可复用性。实例是通过构造函数来创建的,每个构造函数可以new多个实例,每个实例都会继承原型上的方法和属性,在vue中,一个vue组件就是一个vue实例,当一个组件被复用多次,就会创建多个实例。如果data是对象,那么被多次复用的这个组件,在某......
  • Vue Router
    什么是路由路由就是URL地址,地址不同,则显示的页面内容不同,路由分为前端路由和后端路由,Vue属于前端框架,因此我们讲解的路由也是前端路由。Vue是单页面应用程序,通过hash(#)来实现不同页面之间的切换。什么是单页面应用程序?通俗地讲就是不需要刷新页面,所有组件都在一个页面上的应用......
  • Vue 项目性能优化实践
    Vue已经成为前端必备利器了,Vue首页加载速度慢是很常见的问题,dist文件的体积差不多都在10m左右,解决方式也有很多,最简单的方式增加服务器的配置性能,当然在预算有限的情况下,如果通过优化来提升速度呢。比如在一台普通配置服务器上,差不多加载速度在15s左右,那是没办法接受的,不管是用......
  • vue通讯的几种方式
    1.props和$emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过$emit触发事件来做到的。2. 父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。3.$refs获取组件实例。4.envetBus兄弟组件数据传递,这种情况下可以使用事件总线的方......
  • 使用VuePress打造的LearnData知识库帮助我更好地学习和传播 - 从笔记到分享
    在当今快节奏的社会中,技术变化日新月异。作为一名技术博客站长,我深切感受到了学习和传播知识的重要性。为了更好地满足读者的需求,我决定采用VuePress搭建一个功能强大且易于维护的知识库平台,名为LearnData。本文将介绍我如何利用VuePress构建LearnData,并展示一些相关的代码示例。......
  • Vue 3 Deep Dive with Evan You
    什么是DOM?如果我们把这个HTML加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如:letitem=document.getElementByTagName('h1')[0]item.textContent="NewHeading"VDOM网页可以有很多DOM节点,......