前言
在 Vue3 中，v-model 指令默认绑定到组件的 modelValue 属性上。
但如果咱们想要的是默认绑定到 value 属性呢？
咱们能够应用 AST（形象语法树） 转换来实现这一点。
在线演示
vite.config.ts
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { transformModel } from './transformModel'export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { nodeTransforms: [transformModel] } } }) ]})transformModel.ts
import { NodeTransform, findDir, createSimpleExpression } from '@vue/compiler-core'const ELEMENT = 1export const transformModel: NodeTransform = node => { if (node.type != ELEMENT) return const VModel = findDir(node, 'model') // v-model 没有传入绑定的属性，则将属性绑定到 value // e.g. v-model => v-model:value // e.g. v-model:xxx => v-model:xxx if (VModel && VModel.arg == null) { VModel.arg = createSimpleExpression('value', true, undefined, 3) }}以上就是残缺代码了
让咱们来试试成果
<!-- TestModel.vue --><template> <input :value="value" @input="$emit('update:value', $event.target.value)" /></template><script setup lang="ts">defineProps<{ value: string }>()</script><!-- App.vue --><template> <TestModel v-model="value" /> <div>{{ value }}</div></template><script setup lang="ts">import { ref } from 'vue'const value = ref('')</script>