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组件上默认的方法名，如果有额外的操作我们采取@这个方法名，默认是不执行任何操作。