v-model的进阶用法

1、v-model包含哪两个指令 v-bind v-on

2、合并用法

  <!-- 合并写法 -->
  <input type="text" v-model="name">

3、拆分写法

  <br>
<input type="text" 
:value="message"
@input="message=$event.target.value"
>
<input 
type="checkbox"
:checked='myChecked' 
@change="myChecked=$event.target.checked"
>

message: this.name,
myChecked:true

 4、高级用法

<UpdateName  v-model="user.name"  @close='isShowUpdateName=false'></UpdateName>

model:{
  prop:'name',//value=>name(数据名)
  event:'on-success',//input=>事件名
},

 

 

5、拆分写法

<UpdateName  
:name="user.name" 
@update:name='user.name=$event' 
@close='isShowUpdateName=false'
></UpdateName>

this.$emit("update:name", this.message);//子组件

 6、.sync用法

<UpdateName  
:name.sync="user.name"  
@close='isShowUpdateName=false'
></UpdateName>

this.$emit("update:name", this.message);//子组件