vue-:model和v-model的区别

父组件

　　<div>
      <input type="text" v-model='msg'>
      <child v-model='msg'></child>
  </div>

　子组件

 Vue.component('child', {
      props: ['value'],
      template: '<input type="text" @input="handleInput" :value=value />',
      methods: {
        handleInput(e){
          console.log(e);
          this.$emit('input', e.target.value);
        }
      }
    })
   new Vue({
    el:'#example',
    data:{
      msg:'好天气',
      parentMsg:''
    }
   })  

无论改变父组件还是子组件的输入框，value和msg的值都会改变，两个输入框的值也就同时改变了。

 

 :model和v-model的区别
     :model是v-bind:model的缩写,<child :model="msg"></child>这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

本质是：

v-model是内置的数据双向绑定

model是绑定自定义属性model ，model相当于 v-bind:model