封装组件之前我们需要知道 v-mode 的默认值。
组件上使用 v-mode 会默认传给子组件 props 一个 value 属性。
只需要把 props 里面的 value 属性拿绑定在 input 的 :value=“value” 属性上。
html代码:
<template> <div class="wrapper"> <input ref="input" :value="value" type="text" :disabled="disabled" :readonly="readonly" @change="$emit('change', $event.target.value)" @input="$emit('input', $event.target.value)" @focus="$emit('focus', $event.target.value)" @blur="$emit('blur', $event.target.value)" > </div> </template>
js代码:
export default { name: 'customerInput', props: { disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, value: { type: String, default: '' } }, }
触发 v-model 上的默认事件,v-model 内部会自己给传入的属性赋值:
@change="$emit('change', $event.target.value)" @input="$emit('input', $event.target.value)" @focus="$emit('focus', $event.target.value)" @blur="$emit('blur', $event.target.value)"