基本用法

v-model 指令可以在表单<input> 、<textarea> 、<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。但是v-model本质上不过是语法糖，将监听用户输入事件及更新数据直接通过v-model进行操作。
需要注意的是v-model指令会忽略所有表单元素的属性的初识值，而是引用Vue实例的数据作为数据的来源，提前在Vue实例的data中设置初识值，
image.png
在 JavaScript 在组件的 data 选项中声明初始值message为空，每当用户输入时就会改变message的值。

自定义组件使用V-model

  1. //v-model本质上是一个语法糖
  2. <input v-model='content'>
  3. //等价于
  4. <input :value='content' @input='content = $event.target.value'>
  5. //：value是初识值与data数据绑定，@input是将用户输入与初识值绑定，这就是双向绑定。

所以我们可在组件中设置value的props，并通过触发一个input事件来修改value的值，从而完成自定义。

  1. //父组件中引用自定义组件
  2. <template>
  3.     <Myinput v-model='content' />
  4.   //等价<Myinput :value='content' @input='content = $event.target.value'>
  5. </template>
  7. //定义子组件
  8. Vue.component('Myinput',{
  9.     template:`<div>
  10.               <input :value='value' @input='onIput'>
  11.              </div>`,
  12.     props:{
  13.         value:{
  14.             type:string
  15.       //判断value类型
  16.         },
  17.     },
  18.   methods:{
  19.       onIput(e){
  20.         const value = e.target.value
  21.       //得到用户输入的值
  22.       this.$emit('input',value)
  23.       //外部使用$event调用
  24.     }
  25.   },
  26. })