一、v-model用在哪里

v-model是vue中实现数据双向绑定的一种方式，主要用在两个方面

（1）在组件中，如果存在部分需要响应实时输入的部件，如input，如需要对input中的内容输入或者删改可以做出及时的反应，类似搜索引擎的推荐建议等，

（2）在嵌套组件中，父组件和子组件共用一个状态值，且二者都对该状态值有修改或者获取显示的需求，那么同样可以使用v-model，实现实时的响应，如页面上存在一个模态窗口，而该模态窗口的值的改变需要实时显示在父组件的一个区域内。

二、v-model的具体使用

1、用在单组件中（不需要跨组件传递消息）

单组件中，可以直接利用v-model绑定data：如下

<template>
  <div>
    <input type="text" v-model="inputval" />
    <p>{{ inputval }}</p>
  </div>
</template>
<script setup lang='ts'>
//模块
//组件
//方法
import { watch, ref } from "vue"
//类型

const inputval = ref('')

// 监听变化时的操作
watch(inputval, (newval, oldvalue) => {
  console.log(inputval.value.length);
})

</script>
<style scoped>
</style>

2、用在父子组件中（需要跨组件传递消息）

步骤Ⅰ

首先需要在父组件中创建绑定值，有两种

（1）指定绑定属性名

<template>
    <custom-component v-model:isshow='showVal'>
    </custom-component>
</template>

import {ref} from 'vue
import type {Ref} from 'vue'

const showVal:Ref<boolean> = ref(true)

（2）不指定绑定属性名：默认为属性名为modelValue，相当于

<template>
    <custom-component v-model='showVal'>
    <!-- 相当于<custom-component v-model='showVal'>  -->
    </custom-component>
</template>

import {ref} from 'vue
import type {Ref} from 'vue'

const showVal:Ref<boolean> = ref(true)

步骤Ⅱ

在子组件中接受属性值并在更改后emit

（1）指定绑定属性名

<template>
  <div @click="fnemit">
    {{isshow}}
  </div>
</template>
<script setup lang='ts'>

const props = defineProps({
  isshow: {
    type: Boolean
  }
})

const emit = defineEmits(['update:isshow'])

function fnemit(){
  // 随便写个值吧，这个会被设置为modelValue绑定值的新值
  emit('update:isshow', false)

}
</script>
<style scoped>
</style>

（2）不指定绑定属性名

<template>
  <div @click="fnemit">
    {{modelValue}}
  </div>
</template>
<script setup lang='ts'>

const props = defineProps({
  modelValue: {
    type: Boolean
  }
})

const emit = defineEmits(['update:modelValue'])

function fnemit(){
  // 随便写个值吧，这个会被设置为modelValue绑定值的新值
  emit('update:modelValue', false)

}
</script>
<style scoped>
</style>