Vue填坑（v-model和:model）

在使用input進行輸入的時候，在vue中最好使用v-model進行數據的雙向綁定。

例如：

<el-input v-model="input" placeholder="請輸入內容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

今天遇到的小問題，當我使用:model進行數據綁定的時候，在輸入框中無法輸入內容。

我原本代碼：

<el-input :model="searchInfo" placeholder="搜索內容">
    <i slot="suffix" class="el-input__icon el-icon-search" @click="onEnterSearch"></i>
</el-input>

更改之後：

<el-input v-model="searchInfo" placeholder="搜索內容">
     <i slot="suffix" class="el-input__icon el-icon-search" @click="onEnterSearch"></i>
</el-input>

Note:
:model和v-model的區別
:model是v-bind:model的縮寫,這種只是將父組件的數據傳遞到了子組件，並沒有實現子組件和父組件數據的雙向綁定。當然引用類型除外，子組件改變引用類型的數據的話，父組件也會改變的。