📰 前言
在 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 = 1
export 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>