-
vue3获取组件的上下文
import { getCurrentInstance } from 'vue'; // 获取当前组件实例 const instance = getCurrentInstance(); // 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。 // 方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到 const { ctx } = getCurrentInstance(); // 方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐) const { proxy } = getCurrentInstance();
-
nuxt3 中使用Vue
<component :is="someComputedComponent">
语法,需要使用Vue提供的resolveComponent
辅助方法,否则无法正常渲染组件,且组件名称必须是字符串而不是变量<template> <component :is="clickable ? MyButton : 'div'" /> </template> <script setup> const MyButton = resolveComponent('MyButton') </script>
-
警告:Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with
markRaw
or usingshallowRef
instead ofref
.使用"markRaw"方法将组件对象标记为非响应式对象,或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。const componentMap = markRaw(myComponent)
-
elementPlus与elementUI语法升级
//elementUI的descriptions组件插槽语法: <el-descriptions> <template slot="extra"></template> </el-descriptions> //elementUI的elementPlus组件语法: <el-descriptions> <template #extra></template> </el-descriptions> 否则会不展示插槽内容
//elementUI的popover组件插槽语法: <el-popover> <div slot="reference"></div> </el-popover> //elementUI的popover组件语法: <el-popover> <template #reference></template> </el-popover> 否则会报如下警告