一、问题
Uncaught (in promise) TypeError: _ctx.$t is not a function
at Select.vue:51:95
at renderFnWithContext (runtime-core.esm-bundler.js:852:21)
at renderSlot (runtime-core.esm-bundler.js:6627:55)
at index.vue:18:20
at renderFnWithContext (runtime-core.esm-bundler.js:852:21)
at renderSlot (runtime-core.esm-bundler.js:6627:55)
at Proxy._sfc_render80 (table.vue:31:9)
at renderComponentRoot (runtime-core.esm-bundler.js:895:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5127:34)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
想对应的版本
"dependencies": {
"@vueuse/core": "^4.10.0",
"axios": "^0.21.1",
"element-plus": "^2.2.10",
"js-cookie": "^2.2.1",
"lodash": "^4.17.20",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"throttle-debounce": "^3.0.1",
"vue": "^3.2.8",
"vue-i18n": "^9.1.6",
"vue-router": "4",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.0",
"@vue/compiler-sfc": "^3.2.6",
"sass": "^1.32.12",
"vite": "^2.9.15"
},
"resolutions": {
"esbuild": "0.14.34"
}
也就是 vue-i18n 版本是9.1.6
我出现错误的场景
list.vue 嵌套 add.vue,add.vue 嵌套queryselect.vue。
列表页面dialog弹出add.vue 子页面，add.vue有部分需要到queryselect.vue进行勾选。 然后再queryselect.vue勾选完成之后 或者是关闭select.vue的时候报错。然后这个报错又不影响功能的执行
二、解决办法
在 createI18n 方法的时候加上
globalInjection:true, //进行全局依赖 legacy:false, //过去式，为了兼容老版本，不写默认是true
如下图所示
而子页面往父页面传值的方法
vue2的方法，在methods里面，这这里面的refreshSelectClose是父页面的事件，一下是queryselect.vue代码
<template><el-button type="primary" @click="submit">提交</el-button>
</template><script> import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
methods: {
submit () {
const chooseData = ref([])
this.$emit('refreshSelectClose',chooseData ) //关闭后反馈的事件，
}
},
})
</script>
add.vue页面，嵌套queryselect.vue子页面, refreshSelectClose是定义的时间，而selectClose是真实执行的方法
<template>
<QuerySelect v-if="layer.show" @refreshSelectClose="selectClose" />
</template>
<script>
import {
defineComponent,
ref,
reactive,
} from 'vue'
import QuerySelect from './querySelect.vue'
export default defineComponent({
components: {
QuerySelect,
},
methods: {
selectClose (data) {
console.log("test",data)
}
}
})
而vue3的setup里面不能用this，需要在setup定义参数
queryselect.vue
<template>
<el-button type="primary" @click="submit">提交</el-button>
</template>
<script>
import { defineComponent, ref, watch } from 'vue'
export default defineComponent({
name: 'uaisKeyQuery',
props: {
selectlayer: {
type: Object,
default: () => {
return {
show: false,
title: '',
showButton: true,
operationType: 'view',
zindex:1001,
}
}
}
},
setup(props,context) {
const chooseData = ref([])
const submit = () => {
context.emit('refreshSelectClose',chooseData ) //关闭后反馈的事件，
}
}
return {
chooseData,
submit,
}
})
</script>
setup参数里面context就是vue2里面的this，而在setup里面就没有this这个概念了，而这里的参数props就是defineComponent 里面的props这个key，比如页面需要初始化默认值的话就在props这里面加。
以下是add.vue
<template>
<QuerySelect v-if="layer.show" @refreshSelectClose="selectClose" />
</template>
<script>
import {
defineComponent,
ref,
reactive,
} from 'vue'
import QuerySelect from './querySelect.vue'
export default defineComponent({
components: {
QuerySelect,
},
setup(props,context) {
const selectClose= (data)=> {
console.log("test",data)
}
return {
return selectClose,
}
}
})
标签：function,core,vue,bundler,js,i18n,esm,defineComponent From： https://www.cnblogs.com/zhian/p/16962603.html