引入
import { Input } from 'lengzi'
使用组件
Vue.component('g-input',Input)
相关属性
- value,可以设置默认值
- disabled状态
- readonly状态
- 可以进行双向绑定,只要
使用方法
简单使用
双向绑定
思路
父组件双向绑定一个数值value,并将value传给子组件,子组件利用props获得父组件传入的value绑定给属性value。当input输入内容时,触发change事件,并传递输入的值。父组件触发传递过来的change事件,并将所得到的值赋值给value。
父组件
<g-input v-model="value"></g-input>
data(){
return {
value: 1
}
}
Input组件
<input :value="value" @change="$emit('change',$event.target.value)">
props: {
value: {
type: String
}
}