一、组件的使用
<la-radio
v-model="radioVal"
name="男"
val="1"
/>
data(){
return {
radioVal:'1'
}
},
二、组件的封装
<div class="laRadio">
<span>{{name}}</span><input type="radio" :value="val" v-model="innerVal">
</div>
props:{
value:null,
name:null,
val:null
},
computed:{
innerVal:{
get(){
return this.value
},
set(value){
this.$emit('input',value)
}
}
}
三、关键
1、封装radio时,每一个input会绑定一个value属性;同一组input框的v-model会绑定同一个属性innerVal,发生改变后innerVal取到当前input的value值
2、使用v-model实现组件间通讯时,在子组件中要完成获取父组件传值和设置父组件的值,要使用计算属性,并用get和set的方式设置属性
四、另外
1、v-model
会忽略所有表单元素的 value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
2、v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
text 和 textarea 元素使用 value
property 和 input
事件;
checkbox 和 radio 使用 checked
property 和 change
事件;
select 字段将 value
作为 prop 并将 change
作为事件。