vue3 v-model 双向绑定

v-model是vue3的一个内置指令，可以实现父组件变量(不能是常量)与子组件属性的双向绑定，我们在很多知名的开源库可以看到这个命令,比如我们要实现一个弹窗组件需要父组件和子组件都可以操作这个变量来实现隐藏显示统一步调。

<a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
<!-- ant design 弹窗组件使用了 v-model 指令 -->
</a-modal>

v-model 自定义名称

<!-- 父组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 自定义v-model 名称-->
    <demo v-model:show="state.show" v-model:message="state.message"></demo>
    <button @click="showDlg">点击弹窗</button> 
  </div>
</template>
 <script setup>
import { reactive } from "vue";
import demo from "./v-modelSetup.vue";
//定义要使用v-model的变量show和message
const state = reactive({
  show: false,
  message: "https://www.itxst.com",
});

//按钮事件，我们改变show的值
const showDlg = () => {
  state.show = true;
};
</script>

v-modelSetup.vue子组件实现修改v-model的值（属性值）

<!-- 子组件名称 v-modelSetup.vue -->
<template>
  <div class="itxst" v-if="show">
    <div>
      {{ message }}
    </div>
    <div>
      <button @click="ok">确定</button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// 定义了 show 和 message 属性
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  message: {
    type: String,
    default: "",
  },
});

//修改属性的值,定义emits可修改 show 和 message 属性
const emits = defineEmits(["update:show", "update:message"]);

//确定按钮的事件
const ok = () => {
  //关闭弹窗
  emits("update:show", false);
};
</script>
<style scoped >
/* 样式省略，请在试一试中查看 */
</style>

在线试一试

默认名称为 modelValue 用法

<!-- 组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 自定义 匿名v-model 名称-->
    <demo :modelValue="state.show"   @update:modelValue='state.show = $event' ></demo>
    <button @click="showDlg">点击弹窗</button> 
  </div>
</template>
 <script setup>
import { reactive } from "vue";
import demo from "./v-modelNMSetup.vue";
//定义要使用v-model的变量show和message
const state = reactive({
  show: false,
});

//按钮事件，我们改变show的值
const showDlg = () => {
  state.show = true;
};
</script>
<!--组件名称 v-modelNMSetup.vue -->
<template>
  <div class="itxst" v-if="show">
    <div>
      {{ message }}
    </div>
    <div>
      <button @click="ok">确定</button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// 定义了 show 和 message 属性
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  message: {
    type: String,
    default: "",
  },
});

//修改属性的值,定义emits可修改 show 和 message 属性
const emits = defineEmits(["update:show", "update:message"]);

//确定按钮的事件
const ok = () => {
  //关闭弹窗
  emits("update:show", false);
};
</script>

非 Setup 中使用 v-model

<!-- 组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 自定义 匿名v-model 名称-->
    <demo v-model:show="show" v-model:message="message"></demo>
    <button @click="showDlg">点击弹窗</button>
  </div>
</template>
<script >
import demo from "./v-modelNotSetup.vue";
export default {
  name: "app",
  //注册组件
  components: {
    demo,
  },
  data() {
    return {
      show: false,
      message: "www.itxst.com",
    };
  },
  methods: {
    showDlg: function () {
      this.show = true;
    },
  },
};
</script>  
<!-- 子组件名称 v-modelNotSetup.vue -->
<template>
  <div class="itxst" v-if="show">
    <div>
      {{ message }}
    </div>
    <div>
      <button @click="ok">确定</button>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
     name: "demo",
     props:{
        show:false,
        message:''
     },
      methods: {
        ok: function () {
          //非setup语法糖 可以直接触发事件,不需要定义
         this.$emit("update:show",false);
      },
    }}
</script>
<style scoped>
/* 样式省略，请在试一试中查看 */
</style>

在线试一试

内置修饰符

v-model 的修饰符可以对绑定的数据做特定处理
 v-model.number 把字符串转换为数值类型
 v-model.trim 去除两侧的空格
 v-model.lazy 绑定时生效，如把 input 高频率触发事件改为 blur 低频率触发事件

<template>
   <!-- 把 string 类型转换为 number 类型  -->
   <input type='text' v-model.number='value' />
</template>

自定义修饰符

<!-- 组件名称 app.vue -->
<template>
  <div class="itxst">
    <!-- 自定义修饰符 bool -->
    <demo v-model:show.bool="state.show" ></demo>
    <button @click="showDlg">点击弹窗</button>
  </div>
</template>
 <script setup>
import { reactive } from "vue";
import demo from "./v-modelXSFSetup.vue";
//定义要使用v-model的变量 show
const state = reactive({
  show: false
});

//按钮事件，我们改变show的值
const showDlg = () => {
  state.show = true;
};
</script>

<!-- 子组件名称 v-modelXSFSetup.vue -->
<template>
  <div class="itxst" v-if="show">
    <div>hi lili...</div>
    <div>
      <button @click="ok('false')">确定</button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// 自定义修饰符
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  //自定义修饰符 由  name + Modifiers组成
  showModifiers: { default: {} },
});

//修改属性的值,定义emits可修改 show 属性
const emits = defineEmits(["update:show"]);

const ok = (val) => {
  //如果有 bool 修饰符,我们把字符串 val 转换为 Boolean
  if (props.showModifiers.bool) {
    val = Boolean(val);
  }
  //关闭弹窗
  emits("update:show", !val);
};
</script>
<style scoped> 
/* 样式省略，请在试一试中查看 */
</style>

在线试一试