vue3 中 setup 的使用
问题
- 想要在 setup 中使用 this.$message.success()
想要在 setup 中拿到 this,或者说是拿到组件实例是行不通的由于在执行 setup 时,组件实例尚未被创建,因此在 setup 选项中没有 this。这意味着,除了 props 之外,你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。
解决
1. 可以通过引入 elMessge 然后直接使用
import {elMessage} from 'element-plus'
elMessage.success('发送请求成功')
2. getCurrentInstance()来拿到当前组件的实例(注意该方法任然有个问题就是,getCurrentInstance 这个方法只是在 develop(开发模式下)有效,生产环境无法正常使用)
需要注意的是,这个方法只能在 setup 下直接调用或者生命周期中调用才生效,否则返回的是 undefined
setup(){
// 通过调用该方法拿到实例
const currentInstance=getCurrentInstance()
function fetchLists(){
getCurrentInstance()// don't work
currentInstance.appContext.config.globalProperties.$message.success()
}
}
3.可以通过高阶组件(provide/inject)来实现
main.ts 文件下
下面只是一些关键的代码
import App from 'xxxx/App.vue'
import {elMessage} from 'element-plus'
const app=CreateApp(App)
app.provide('$message',elMessage)
app.mounted('#app')
addArticle.vue 文件下
import {inject} from 'vue'
setup(){
function fetchLists(){
(inject('$message') as any).success('请求成功')
}
}
--------------------------------------------------------------------------2021/5/25 分割线------------------------------------------------------------------
在项目中遇到 eslint 报错
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YDUoHfhk-1642137494526)(./images/avatar.jpg)]
Failed to compile.
src/utils/markdown.ts:9:21
TS2322: Type 'string' is not assignable to type 'never'.
7 | add: function (text: any, level: any) {
8 | var anchor = `#toc${level}${++this.index}`;
> 9 | this.toc.push({ anchor: anchor, level: level, text: text });
| ^^^^^^
10 | return anchor;
11 | },
12 | // 使用堆栈的方式处理嵌套的ul,li,level即ul的嵌套层次,1是最外层
需要在 tsconfig.json 中添加以下代码:
// 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
"noImplicitThis": false,
所有配置代码如下
<!-- 所有配置代码如下 -->
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
// 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
"noImplicitThis": false,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
vue3 中修改.vue 文件热更新失败的问题
在 vue.config.ts 中配置
module.exports={
chainWebpack:(config)=>{
config.resolve.symlinks(true)
}
}
Vue3 中使用$refs
因为 Vue3 中都是偏向函数式开发所以需要引入 ref
import { ref } from 'vue'
setup() {
let boxRef = ref(null)
return {
boxRef
}
}