目录

一、v-model用在哪里

二、v-model的具体使用

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

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

步骤Ⅰ

步骤Ⅱ

总结：

Tips：

---

一、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>

总结：

默认与定义属性名的操作方式基本：

1、定义props接受父组件传递的属性，默认的属性名为modelValue，设定的属性名为v-model：后的那个命名。

2、定义属性emit发送名称，格式为"update: " + 属性名，默认为"update:modelValue"，非默认为"update:属性名"。

3、发送emit事件，并传递负载，注意负载会被当做新值赋予属性名绑定的响应值，在上面的例子中，会把负载传递给showVal，然后子组件中会同步的发生响应式变化。

v-model如果用于嵌套组件之间，则其本身是一个语法糖，父组件向子组件传递值，子组件通过emit发送更新事件，更新事件把负载值转变为父组件中绑定响应值的新值。

Tips：

需要注意的是，update:属性名 是一个固定的格式，因为v-model自动包含了@update:属性名="绑定值=负载"