深入Vue中v-model（详解）

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

深入v-model

利用value与input事件实现v-model功能

	<h2>深入v-model</h2>
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
    <br>
    <h2>深入v-model原理</h2>
    <!-- 原生DOM当中是有oninput事件：当表单元素发生文本的变化的时候就会立即出发 -->
    <input type="text" :value="msg" @input=" msg = $event.target.value"/>
    <span>{{msg}}</span>



	data() {
      return {
         msg:""
      }
    }

这样就简单的实现了。

v-model:实现父子组件数据同步(实现父子组件通信)

父组件：

<!--
	组件上的:value是Props，父子组件通信
	这里的@input是 非原生DOM的input事件，属于自定义事件
-->
<CustomInput :value="msg" @input="msg = $event"></CustomInput>
<!--
    上面那种写法可以简化为下面这种写法，可以实现父子组件数据同步，v-model不仅可以在表单
使用，还可以在非表单元素身上使用，后台管理系统中经常在非表单元素身上，或者已经封装好的身上v-model。
-->
<CustomInput v-model="msg"></CustomInput>

子组件：

<template>
	<div>
        <input type="text" 
               // 绑定从父亲传递过来的参数
               :value = "value"
               // 绑定原生DOM事件@input,输入框内容发生改变,就将改变的值作为$emit的第二个参数
			   // 并通过$emit触发父亲给子组件的自定义事件input
               @input="$emit('input',$event.target.value)"/>
    </div>
</template>
<script>
	export default {
        name: "CustomInput",
        // 接收从父亲传递过来的:value="msg"的值
        // 如果是简写形式(<CustomInput v-model="msg"></CustomInput>)也是从value接收
        props:["value"]
    }
</script>

这样就实现了v-model实现父子组件数据同步 (实现父子组件通信)

组件上可以理解为v-model是 :value="msg" @input="msg = $event" 的语法糖

文章有写的不当的地方，欢迎指正修改。如果感觉文章实用对你有帮助，欢迎点赞收藏和关注，你的点赞关注就是我动力，大家一起学习进步。