vue3 模板编译 —— 把 v-model 默认改为 v-model:value

📰 前言

在 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>

🚀 运行成功 😆

🚀 在线 StackBlitz 编辑

---

👍 点个赞吧 ✨ 👈