在平时会遇到一些input,select,checkbox,radio等组件,需要使输入到组件的值与父组件所对应值双向绑定,而这一般通过v-modul可以实现
在这里我已经注册好全局组件了,可以直接使用.因为名字不一样,我就懒得每个都改一次了,都用Select
1.input type=“text”这种类别的
// 父组件
<template>
<div>
<Select v-model="hi"></Select>
<p>{{ hi }}</p>
</div>
</template>
export default {
data() {
return {
hi: ''
}
}
}
// 子组件
<template>
<div>
<input type="text" :value="value" v-on:input="$emit('input', $event.target.value)">
</div>
</template>
export default {
props:{
value:String
}
}
2.select
// 父组件
<template>
<div>
<Select v-model="hi"></Select>
<p>{{ hi }}</p>
</div>
</template>
export default {
data() {
return {
hi: ''
}
}
}
// 子组件
<template>
<div>
<select :value="value" @change="$emit('change', $event.target.value)">
<option value="1" label="1"></option>
<option value="2" label="2"></option>
<option value="3" label="3"></option>
<option value="4" label="4"></option>
</select>
</div>
</template>
export default {
model: {
prop: 'value',
event: 'change'
},
props:{
value:String
}
}
3.checkbox
// 父组件
<template>
<div>
<Select v-model="hi" :date='arr'></Select>
<p>{{ hi }}</p>
</div>
</template>
export default {
data() {
return {
hi: [],
arr: ['1','2']
}
}
}
// 子组件
// 注:这是我是显示的值,就是父组件arr中的值,如果是要换成true or false
// 算了,估计用到的也少,没必要多讲。
<template>
<div>
<label v-for="(item, index) in date" :key="index">
<input type="checkbox" @change="valueChange" :value="item"/>
</label>
</div>
</template>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: Array,
date: {
type: Array,
default: () => []
}
},
data () {
return {
values: []
}
},
methods: {
valueChange(event){
let {checked,value} = event.target;
if(checked&&!this.values.includes(value)){
//如果当前选中并且values中没有对应的值。将此值添加到values中
this.values.push(value)
}else if (!checked&&this.values.includes(value)){
//如果当前取消选中并且values中存在对应的值。将此值从values中移除
let index = this.values.findIndex(hobby=>hobby===value)
this.values.splice(index,1)
}
this.$emit('change',this.values)
}
}
}
4.radio
这个与上面的checkbox类似,就懒得弄了,自己加油!
结语
这只是简单的封装了下,可以用但并不高级;
一般后两类的使用都类似下:
<Ckeckbox-group>
<Option value="" name=""></Option>
</Ckeckbox-group>
以后抽空再补上,现在各位看官先将就将就