vue元件繫結v-model指令

在平常的開發中一般v-model是繫結在input框或者textarea上的。但是在element ui框架中像el-input這樣的元件可以直接v-model繫結資料。

<ListItem v-model="value">
        <div slot="slot1">你好1</div>
        <div slot="slot2">你好2</div>
        <div slot="slot3">你好3</div>
      </ListItem>


<template>
  <div class='list'>
    <!-- $emit必須是input還有change -->
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>

export default {
  props: ['value']
}
</script>

在子元件的input框中$emit傳送的方法名要和原生input框的類似input或者change方法名一樣，這樣就可以實現自定義元件繫結v-model了。
其實子元件傳送出來的這個方法名是vue元件上預設的方法名，如果有額外的操作我們採取@這個方法名，預設是不執行任何操作。