1.input-text输入框的双向绑定
text文本框默认使用prop:value和event:input来双向绑定，如果需要在一个组件中绑定多个输入框需要使用：update.prop 和 :prop.sync 来绑定其它输入框
子组件代码
<template>
<div class="myslot">
<input v-model="syncValue">{{syncValue}}
<input v-model="syncCount">{{syncCount}}
</div>
</template>
<script>
export default {
name:'myslot',
props:['value','count'],
computed:{
syncValue:{
get(){
return this.value
},
set(val){
this.$emit('input',val)
}
},
syncCount:{
get(){
return this.count
},
set(val){
this.$emit('update:count',val)
}
}
}
}
</script>
父组件代码
<template>
<div id="app">
<MyInput v-model="val" :count.sync="count"></MyInput>
</div>
</template>
<script>
import MyInput from "./components/my-input.vue"
export default {
name: 'App',
components: {
MyInput
},
data(){
return{
val:'',
count:''
}
}
}
</script>
2.input-radio单选框的双向绑定
APP组件代码
<template>
<div id="app">
<MyRadio v-model="radio" :data="data"></MyRadio>
</div>
</template>
<script>
import MyRadio from "./components/my-radio.vue"
export default {
name: 'App',
components: {
MyRadio,
},
data(){
return{
radio:'',
data:[
{id:'1',value:'apple',text:'苹果'},
{id:'2',value:'banana',text:'香蕉'},
{id:'3',value:'orange',text:'橘子'},
],
}
},
}
</script>
my-radio组件代码
<template>
<div class="myradio">
<RadioItem :key="index" :value="item.value" :label="item.text" v-for="(item,index) in data"></RadioItem>
</div>
</template>
<script>
import RadioItem from "./radio-item.vue"
export default {
name:'Myradio',
props:['data','value'],
components:{
RadioItem,
},
provide(){
return{
$myradio: this
}
}
}
</script>
radio-item组件代码
<template>
<div class="radio-item">
<input type="radio" :id="label" :value="value" v-model="syncRadio">
<label :for="label">
{{label}}
</label>
</div>
</template>
<script>
export default {
props:['label','value'],
inject:['$myradio'],
computed:{
syncRadio:{
get(){
return this.$myradio.value
},
set(val){
return this.$myradio.$emit('input', val)
}
}
}
}
</script>
