关于vue.js:vue3-模板编译-把-vmodel-默认改为-vmodelvalue

📰 前言

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

👍 点个赞吧 ✨ 👈