vue使用填坑之:model和v-model的区别

v-model通常用于input的双向数据绑定 <input v-model="parentMsg">，也可以实现子组件到父组件数据的双向数据绑定：
首先说说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>这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。