Vue学习记录之十二 v-model高级使用

一、v-model 介绍

v-model 是 Vue.js 提供的一个用于在表单控件和数据之间创建双向绑定的指令。其实就是语法糖 通过props 和 emit组合而成的。v-model 指令被增强，允许使用多个 v-model 绑定来处理不同的 prop 和事件。既给自定义组件绑定一个或者多个v-model与子组件之间实现数据的双向绑定。
同时你可以为 v-model 指令添加修饰符，以调整其行为。修饰符是通过在指令名称后添加点和修饰符名称来实现的。常见的修饰符包括 .lazy、.number 和 .trim。这些修饰符分别用于延迟更新、将值转换为数字以及自动去除输入值的空格。Vue3中也容许自定义修饰符。

二、defineProps和defineEmits配合使用实现子父参数双向绑定。

实例1：使用单个默认的v-model

实现子父组件的数据双向流动
<子组件名称 v-bind="isShow "></子组件名称>
表示将父组件的 isShow 数据属性与 <vModeVue> 组件的 modelValue（这个名称是固定的） 进行双向绑定。

<template>
    <h1>我是父组件</h1>
    <div><button @click="isShow = !isShow">开关</button></div>
    <div>isShow:{
  
  { isShow }}</div>
    <hr>
    //父组件可以通过 v-model 指令向子组件传递值，并在子组件内部对其进行双向绑定。
    <vModeVue v-model="isShow"></vModeVue>
</template>
<script setup lang='ts'>
	import {
     
      ref,reactive } from 'vue'
	import vModeVue from './components/v-model.vue'
	const isShow = ref<boolean>(true)
</script>

在子组件中通过defineProps中的modelValue来接收。

<template>
    <div class="model" v-if="modelValue">
        <div>{
  
  { modelValue }}</div>
        <div class="close"><button @click="close">关闭</button></div>
        <h3>我是v-model子组件 dialog</h3>