Vue框架，v-model 原理详解和代码demo、视频教程

北风toto

已于 2024-04-03 11:16:50 修改

阅读量1.1k

点赞数 16

分类专栏： # Vue 文章标签： vue.js javascript 前端

于 2024-02-27 16:07:36 首次发布

本文链接：https://blog.csdn.net/m0_46085118/article/details/136317992

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、视频教程
二、原理和作用
- 原理
- 作用
三、input基础标签实现v-model讲解
四、自定义组件实现v-model讲解
- 单文件demo
- 组件版demo（两个文件）
其他
- 对于已有对象添加新属性，:data失效问题处理

一、视频教程

v-model 原理详解

二、原理和作用

原理

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。
最初的v-mode本身就是为了input标签而设计的，所以绑定的就是value属性和input事件，属性和事件都没法改成其他的，比如a标签没有这两个属性，使用v-mode就会直接报错。

作用

提供数据的双向绑定
数据变，视图跟着变:value
视图变，数据跟着变@input

三、input基础标签实现v-model讲解

$event 用于在模板中，获取事件的形参

<template>
	<div id="app" >
	<input v-model="msg" type="text">
	<input :value="msg" @input="msg = $event.target.value" type="text">
	</div>
</template>

@input="msg = $event.target.value" 写成
@input="msg = $event" 也可以，这里是等价的
msg = $event.target.value 本质是一个匿名函数，表示把子组件事件的参数值赋值给父组件的 msg 变量

四、自定义组件实现v-model讲解

当自定义组件实现 v-model 时，子组件 props 接收的变量必须是 value，子组件 $emit 提交的事件必须是 input。只要不满足其中一项 v-model 将失效
可自行更改尝试即可理解
优点：父组件v-model 简化代码，实现子组件和父组件数据双向绑定。父组件简化了代码，子组件的代码并没有简化

单文件demo

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Prop</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

</head>
<!--

-->

<body>

    <div id="app">
        当前selectId的值为：{{selectId}}
        <base-select v-model="selectId"></base-select>
        <button @click="update()">通过按钮直接修改selectId的值变成105</button>
    </div>
    <script>
        Vue.component('BaseSelect', {
            template: '<div>\n    <select :value="value" @change="selectCity">\n      <option value="101">北京</option>\n      <option value="102">上海</option>\n      <option value="103">武汉</option>\n      <option value="104">广州</option>\n      <option value="105">深圳</option>\n    </select>\n  </div>',
            methods: {
                selectCity(e) {
                    this.$emit('input', e.target.value)
                },
            },
            props: {
                value: String,
            }
        })
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    selectId: '102'
                }
            },
            methods: {
                update(){
                    this.selectId='105'
                }
            }
        })
    </script>
</body>

</html>

组件版demo（两个文件）

App.vue

<template>
  <div class="app">
    当前selectId的值为：{{selectId}}
    <BaseSelect v-model="selectId"></BaseSelect>
    <button @click="update()">通过按钮直接修改selectId的值变成105</button>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102'
    }
  },
  methods: {
    update(){
      this.selectId='105'
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>

BaseSelect.vue

<template>
  <div>
    <select :value="value" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    selectCity(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style>
</style>

其他

对于已有对象添加新属性，:data失效问题处理

//非响应式数据，会导致 :data失效
this.formData.test = value
//响应式数据
this.$set(this.formData, 'test', value);