v-model是 Vue2 中唯一支持雙向綁定的指令，用于表單控件綁定，但不代表它只能用在表單控件之上。在文檔 使用自定義事件的表單輸入組件 一節(jié)中提到了，v-model其實(shí)是個(gè)語法糖。

<input v-model="something">

這不過是以下示例的語法糖：

<input v-bind:value="something"  v-on:input="something = $event.target.value">
//簡寫：<input :value="something"  @input="something = $event.target.value">

也就是說，你只需要在組件中聲明一個(gè)name為value的props，并且通過觸發(fā)input事件傳入一個(gè)值，就能修改這個(gè)value。

//父組件中引用
{{title}}用來測試這里顯示'111111'，（測試1）
<myComponent v-model="title"></myComponent>
這里title是動(dòng)態(tài)值，在data里可以自己設(shè)置默認(rèn)值，假如這里我們設(shè)置為“111111”
//子組件
Vue.component('my-component', {
  template: `<div>
                {{value}}//用來測試，這里顯示'111111'，（測試2）
                <button @click="handleInput">按鈕</button>
             </div>`,
  props: ['value'], //接收一個(gè) value prop
  methods: {
    handleInput() {
      this.$emit('input', '222222'); //觸發(fā) input 事件，并傳入新值
      //點(diǎn)擊后（測試1）（測試2）的值均會(huì)變化成'222222'
    }
  }
});

我們來做一個(gè)組件內(nèi)部控制關(guān)閉的彈窗

查看詳情：demo
demo里我保留了一些測試的東西，希望你能看的明白

想一想，如果我們要綁定多個(gè)值的情況

如果綁定多個(gè)值的話，建議我們用object對象類型，Array數(shù)組類型，也就是說我們接收的value類型需要改變下。

//子組件
Vue.component('my-component', {
  template: `<div>
                {{value}}
                <button @click="handleInput">按鈕</button>
             </div>`,
  props: {//這里我們換一種方法寫，其實(shí)寫成上邊的 props: ['value']也是可以的
      value:{
         type: Object //設(shè)置驗(yàn)證類型為對象
      }
  },
  methods: {
    handleInput() {
      this.$emit('input', '222222');
    }
  }
});

props的驗(yàn)證類型建議也看看：props的驗(yàn)證類型