以下摘自官网：

说实话，这段话我完全没看懂，于是讲过查相关资料，以及网上大神的解释，我终于搞明白了，所以必需记录一下

1，首先我们来看下普通的表单控件的双向绑定v-modal

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

那么v-modal到底是如何实现双向绑定的呢？实际上，v-modal只是一个语法糖，上段代码的实际实现如下：

<input type="text" placeholder="edit me"
　　　　　　:value="message" 
　　　　　　@input="message=$event.target.value">
<p>Message is: {{ message }}</p>

这样就情戏多了吧？实际上v-modal做了两件事情

（1）将输入框的值绑定到message变量上，这个是单向绑定，意味着改变message变量的值可以改变input的value，但是改变value不能改变message

（2）监听input事件，当输入框输入内容就单向改变message的值，从而p标签内的message的内容就改变了

2，好了，接下来我们看官网上所说的自定义组件的v-modal，那么自定义组件想实现双向绑定，直接用v-modal是否就可以呢？例如下面这段代码：

<div id="app">
    <input-msg v-model="message"></input-msg>
    <p>{{message}}</p>
</div>

new Vue({
    el: '#app',
    data: {
         message: ''
    }
});

//自定义组件
Vue.component('input-msg', {
    template: '<input type='text'>'
});

当然，这是不生效的 ，v-modal没有如此大的穿透力，可以进行父子组件的双向绑定

那么以我们的正常思路，想要实现父子组件的双向绑定，改如何实现呢？直接看代码：

<div id="">
    <inputapp-msg :value="message" @input="onInput"></input-msg>
    <p>{{message}}</p>
</div>

var app = new Vue({
     el: '#app',
     data: {
         message: ''
     },
     methods: {
          onInput: function(val) {
               this.message= val;
          }
      }
 });

//子组件
Vue.component('input-msg', {
    // 2,input监听，当value改变时，触发updateVal事件
    template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
    // 1,父组件的value值通过props传递给子组件
    props: ["value"],
    methods: {
         updateVal: function(val) {
            // 3,手动触发父组件的input事件并将值传给父组件
            this.$emit('input', val);
         }
     }
});

这样就实现了父子组件的动态绑定，显然这样写起来比较麻烦，那么就来使用自定义组件的v-modal语法糖吧 

<div id="app">
    <input-msg v-model="message"></input-msg>
    <p>{{message}}</p>
</div>

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

//子组件
Vue.component('price-input', {
   model: {
      prop: 'value',
      event: 'input'
    },
    props: ["value"],

    template: `<input :value="value" @input="$emit('input', $event.target.value)" 
               type="text">`

});

 这样就可以了，是不是简洁了很多？这就是自定义组件v-modal的用法，主要是子组件中需要定义modal:{}，这个是关键。