文章为博主自己学习时的一些笔记标注,如有意见不一致,烦请评论区讨论!
1、解决setup中函数及变量暴露与同时返回渲染函数冲突,可以通过expose()函数解决,如下:
import { h, ref } from 'vue'
export default {
setup(props, { expose }) {
const count = ref(0)
const increment = () => ++count.value
expose({
increment
})
return () => h('div', count.value)
}
}
2、 解决没有this + 各种api的方法
a、使用路由方法
// 在新的vue-router里面代替this的useRouter,具体使用如下:
<seript setup>
//引入路由函数
import { useRouter } from "vue-router";
//使用
const router = useRouter();
router.push({
path: "/"
});
</script>
b、vue3中由于没有this所以获取不到$ref,$message,但是官网中提供了方法来获取:
<template>
<el-form ref="rulForm">
<el-form-item></el-form-item>
</el-form>
</template>
<script setup>
import { ref } from 'vue'
const rulForm = ref(null)
</script>
//第二种方法,也可以通过getCurrentInstance来获取
<template>
<el-form ref="rulForm">
<el-form-item></el-form-item>
</el-form>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
const {proxy} = getCurrentInstance()
onMounted(()=>{
console.log(proxy.$refs.rulForm);
proxy.$message({ type: 'info', text: '测试消息' })
})
</script>