前言：对于这个东西还是了解一下其原理比较好，很多时候开发需要用到父子组件通过v-model传值，其实实现的原理和方法一样。

原理解释

  • v-model 本质上是v-bind的语法糖
  • v-model一般只作用于表单，或是扩展于其它组件中，一般用于输入框input、textarea、select，它可以监听输入的数据，当数据发生改变之后触发相关事件
  • 主要是通过v-bind绑定响应式数据
  • 然后通过v-on触发监听事件

实现

1
<input v-model="searchText">

等于

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>
<!--
自html5开始,input每次输入都会触发oninput事件，
所以输入时input的内容会绑定到searchText中，于是searchText的值就被改变;
$event 指代当前触发的事件对象;
$event.target 指代当前触发的事件对象的dom;
$event.target.value 就是当前dom的value值;
在@input方法中，value => searchText;
在:value中,searchText => value;
-->