組件上使用v-model

<input v-model="searchText">

等價於

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

當用在組件上時,v-model則會這樣：

<custom-input v-model="searchText"></custom-input>

等同於

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

為了讓它正常工作，這個組件內的<input>必須：

• 將其 value 特性綁定到一個名叫value的prop上
• 在其 input 事件被觸發時，將新的值通過自定義的input事件拋出

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

現在v-model就應該可以在這個組件上完美地工作起來了：

<custom-input v-model="searchText"></custom-input>

示例

父組件App.vue中

<template>
  <div id="app">
    <Model v-model="searchText"></Model>
    <span>{{searchText}}</span>
    <!-- 等價於
    <custom-input
        v-bind:value="searchText"
        @input="searchText = $event"
    ></custom-input> -->
  </div>
</template>
<script>
import Model from "./components/Model";

export default {
  name: "App",
  data: function() {
    return {
      searchText:''
    };
  },
  components: {
    Model
  }
};
</script>

子組件model.vue中

<template>
  <div id="app">
    <input v-bind:value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
<script>
export default {
  props: ["value"],

};
</script>

過程：
1.輸入文字
2.:value='search' 傳給子組件
3.子組件props接收
4.子組件:value='value'
5.子組件綁定input通過$emit傳給父組件
6.父組件@input='searchText = $event'接收