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 'unplugin-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": ["unplugin-vue-macros/volar"],
    "vueMacros": {
      "jsxRef": {
        "alias": ["useRef"],
      },
    },
  },
}

贡献者

zhiyuanzmj

页面历史

最后编辑于 大约 2 个月前

查看完整历史

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