shortBind

稳定性: 稳定

绑定相同数据名称的 prop 的语法糖。

:value -> :value="value"

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	❌
Volar Plugin	✅

用法

基本用法

<template>
  <input :msg />
  <!-- => <input :msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> -->
</template>

和 shortVmodel 一起使用

<template>
  <input ::msg />
  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo $msg />
  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
  <demo *msg />
  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
</template>

Volar 配置

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-bind",
      // ...
    ],
  },
}

ESLint 配置

// .eslintrc
{
  "rules": {
    "vue/valid-v-bind": "off",
  },
}