记录vue3和ts的坑 (遇到就会写)
1. vue3 全局挂载问题
在vue2中,全局挂载通过Vue.prototype的方式,通过原型定义在每个vue实例中可用
vue2中的方法
在main.js 使用Vue.prototype.$xxx = zzz(zzz可以是变量也可以是import的方法)
-
// 例子
-
Vue.prototype.$test = 50 //定义全局变量test的值为50
在需要的页面通过this.$xxx引入
-
// 例子
-
alert(this.$test) // 弹出的值为50
vue3中的方法 (vue3 ts)
在vue3中,Vue.prototype无法使用,而且也没有this
在main.ts中使用globalProperties
app.config.globalProperties.$xxx = zzz
-
// 先通过app创建vue
-
const app = createApp(App)
-
app.mount('#app')
app.config.globalProperties.$test = 50 // test变量值为50
在需要引用的vue实例中先引入getCurrentInstance
import { getCurrentInstance } from 'vue'
定义proxy
const { proxy } = getCurrentInstance()
在需要使用全局的地方用proxy.$xxx使用
proxy.$xxx
console.log(proxy.$test) // 50
2. getCurrentInstance报错,
proxy' does not exist on type 'ComponentInternalInstance | null'
可以添加ts忽略去解决
// @ts-ignore
-
// @ts-ignore
-
const { proxy } = getCurrentInstance()
新建useCurrentInstance.ts(转载不知道原理 求解) 转自Vue3 getCurrentInstance与ts结合使用的问题 - Mica - 博客园 (cnblogs.com)
新建 hooks\useCurrentInstance.ts
-
import { ComponentInternalInstance, getCurrentInstance } from 'vue'
-
export default function useCurrentInstance() {
-
const { appContext } = getCurrentInstance() as ComponentInternalInstance
-
const globalProperties = appContext.config.globalProperties
-
return {
-
globalProperties
-
}
-
}
组件中使用
-
// 先引入文件
-
import useCurrentInstance from "@/hooks/useCurrentInstance";
-
...
-
// 在setup 中使用处理
-
const { globalProperties } = useCurrentInstance();
3. Type 'boolean' is not assignable to type 'Ref<boolean>'.
类型boolean不可以分配给Ref<boolean>
错误代码:
-
setup () {
-
let awardIsOver = ref(true)
-
····
-
const hideMask = () => {
-
awardIsOver = false
-
}
-
return {
-
hideMask
-
}
-
}
一个点击事件,点击以后将awardIsOver的值变成false
正确代码:
-
setup () {
-
const awardIsOver = ref(true)
-
····
-
const hideMask = () => {
-
awardIsOver.value = false
-
}
-
return {
-
hideMask
-
}
-
}
不是ts类型的问题,是vue3的ref响应式需要加value才是真正的值,ref返回的是个对象
4. vue3 watch监听
如果要监听props父组件传给子组件的值,语法如下 script setup同样适用
-
watch(() => props, (newValue, oldValue) => {
-
console.log(newValue, oldValue)
-
})
5. vue3 使用子组件中的方法
在父组件中,子组件绑定一个ref, 定义一个变量名与ref名一致
const modalRef = ref() // 子组件方法 modalRef为自定义
在父组件中,通过xxx.value.yyy() 的形式调用子组件中方法 xxx为ref定义的名字, yyy为子组件的方法名
modalRef.value.showModal()
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghhck
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13