jsxRef

稳定性: 实验性 ⚠️ 实验性功能，风险自负

自动推断 useRef 的类型.

Features	Supported
Volar	✅

设置自动引入

vite.config.ts

import AutoImport from 'unplugin-auto-import/vite'  export default defineConfig({  plugins: [  AutoImport({  imports: [  {  from: 'vue',  imports: [['shallowRef', 'useRef']],  },  ],  }),  ], })

nuxt.config.ts

export default defineNuxtConfig({  imports: {  presets: [  {  from: 'vue',  imports: [['shallowRef', 'useRef']],  },  ],  }, })

Basic Usage

App.vue

<script lang="tsx"> import { useRef } from 'vue-macros/runtime' // 或者 import { shallowRef as useRef } from 'vue' import { Comp } from './Comp.ts'  export default defineComponent(() => {  const comp = useRef()  comp.value?.foo   return () => (  <>  <Comp ref={comp} />  </>  ) }) </script>

Comp.ts

import { defineComponent } from 'vue'  export const Comp = defineComponent({  setup() {  return { foo: 1 }  }, })

Volar Configuration

tsconfig.json

{  "vueCompilerOptions": {  "plugins": ["vue-macros/volar"],  "vueMacros": {  "jsxRef": {  "alias": ["useRef"],  },  },  }, }

贡献者

Kevin Deng zhiyuanzmj

页面历史

最后编辑于 8 个月前

查看完整历史

edbe3d8-feat!: rename main package name

8ed5494-docs: add jsx-ref (#830)