v-model实现原理（一根绳上的蚂蚱）

东方青云、

已于 2023-07-07 10:31:30 修改

阅读量6.3k

点赞数 9

分类专栏： Vue.js笔记文章标签： javascript 前端 vue.js 前端框架

于 2023-06-22 21:19:47 首次发布

本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/131344048

版权

Vue.js笔记专栏收录该内容

25 篇文章 5 订阅

订阅专栏

1、什么是v-model

v-model 本质上是一颗语法糖，可以用 v-model 指令在表单 <input>、<textarea> 及 <select>元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
数据不仅能从data流向页面，还可以从页面流向data。
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
v-model只能应用在表单类元素（输入类元素）上。

2、v-model实现原理

v-model本质上只是一颗语法糖，真正的实现靠的还是v-bind和oninput事件。
- v-bind：绑定响应式数据
- 触发oninput 事件并传递数据
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

3、实现示例

3.1 实现text和textarea

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入内容" :value="info" @input="change">
        <textarea name="" id="" cols="30" rows="10" :value="info" @input="change"></textarea>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    info: ''
                }
            },
            methods: {
                change(e) {
                    this.info = e.target.value
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

实现效果：

在这里插入图片描述

3.2 实现checkbox和radio

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" :checked="info" @change="change">
        <input type="radio" :checked="info" @change="change" name="h">
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    info: ''
                }
            },
            methods: {
                change(e) {
                    console.log(e.target.checked);
                    this.info = e.target.checked
                }

            }
        }).mount('#app')
    </script>
</body>

</html>

实现效果：

3.3 实现select

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <select name="" id="" :value="info" @change="change">
            <option value="江西">江西</option>
            <option value="湖南">湖南</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
        </select>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    info: ''
                }
            },
            methods: {
                change(e) {
                    console.log(e.target.value);
                    this.info = e.target.value
                }

            }
        }).mount('#app')
    </script>
</body>

</html>

实现效果：

4、v-model在父子组件中的实现原理

使用v-model实现功能：

父组件：

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Son v-model="num" />
    </div>
  </div>
</template>

<script>
import Son from './son.vue'
export default {
  name: 'Approvals',
  components: { Son },
  data: function() {
    return {
      num: 1
    }
  }
}
</script>

<style lang="scss" scoped></style>

子组件：

<template>
  <div>
    <div>我是xiuson,一共洗脚了了{{ value }}次</div>
    <el-button @click="$emit('input',value+1)">点我添加洗脚次数</el-button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style>

</style>

利用v-model的原理来实现

父组件：子组件不变

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Son :value="num" @input="e => num = e" />
    </div>
  </div>
</template>

<script>
import Son from './son.vue'
export default {
  name: 'Approvals',
  components: { Son },
  data: function() {
    return {
      num: 1
    }
  }
}
</script>

<style lang="scss" scoped></style>