vue3.x中v-model学习记录

目录

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