v-model在自定义组件应用详解

1.1.v-model的作用第一个是在普通的input输入框中做双向数据绑定。

2.v-model用在自定义组件中

v-model就是一个语法糖，让我们将数据的绑定和事件的调用都省去，在自定义组件中v-model可以分解为一个绑定，用来将message的值传给子组件，子组件接收prop，同时，在利用input事件将值通过$emit,将值再传递给父组件，直接赋值给message,这样就形成了简化版的父子组件传值，也是自定义组件的一个双向数据绑定。

  <div id='app'>
   <items v-model='message'></items>
   <div>
    <input v-model:value='message'></input>   
   </div>
  </div>
    Vue.component('items',{
      template:`<div >这是item-a的组件  
                  <input :value='value' @input='update' ></input>    
                </div>`,
      props:['value'], //名字是任意一个，用来接收prop
      data(){
        return{
        }
      },
      methods: {
        update(e){
          this.$emit('input', e.target.value)
        }

      }
    })
    var vm=new Vue({
      el:'#app',
      data:{
        message:''
      },
      methods:{},
    })