v-model的深入

v-model是vue中的指令，结合表单元素使用（文本框，表单），主要作用是收集表单中的数据，属于组件通信方式的一种

<template>
  <div>
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        msg:'hello'
      }
    }
  }
</script>

 

 

 此时输入框中的数据和右侧数据同步发送变化

不用v-model也可以实现，这种写法属于数据的单向绑定

<input type="text" :value="msg">

 

 

 在vue2中可以使用@input来实现数据的双向绑定

原生dom中有oninput事件，结合表单元素一起使用，主要作用是当表单元素的文本内容发生变化的时候就会触发一次回调-

    <input type="text" :value="msg" @input="msg=$event.target.value">

 

 

 此时就可以做到数据的双向绑定，也可以修改响应式的数据

 

接下来实现父子组件的数据同步也就是父子组件通信

引入一个子组件

<template>
  <div>
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
    <hr>
     <CustomInput :value="msg" @input="msg = $event"></CustomInput>    //这里的value是props，用于父子组件通信
  </div>
</template>

<script>
  import CustomInput from './CustomInput.vue'
  export default {
    components: {
      CustomInput
    },
    data(){
      return {
        msg:'hello'
      }
    }
  }
</script>

子组件就可以接收显示

<template>
  <div style="background: #ccc; height: 50px;">
  <h2>子组件</h2>
    <h2>{{value}}</h2>
  </div>
</template>

<script >
  export default {
    props:['value']
  }
</script>

 

 此时在给子组件添加一个@input，此时这里的@input并非原生DO买的input事件，属于自定义事件

<CustomInput :value="msg" @input="msg = $event"></CustomInput> 

子组件

<template>
  <div style="background: #ccc; height: 50px;">
  <h2>子组件</h2>
    <h2>{{value}}</h2>
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script >
  export default {
    props:['value']
  }
</script>

 

 此时就可以实现父子组件的数据同步

也可以这样写

<CustomInput v-model="msg" ></CustomInput> 

v-model实现的原理：是通过value和input事件实现的，而且还可以通过v-model实现父子组件数据的同步