封装组件`
<template>
<div class="box">
<el-radio-group v-model="radio" @change="update">
<el-radio v-for="item in radioList"
:key="item.id" :label="item.value">
{{item.value}}
</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name:'radioGroup',
data(){
return{
radio:'',
}
},
props:{
radioList:{
type:Array,
default:()=>{
return []
}
},
value:'',// 默认绑定的v-model的值
},
watch:{
value(newVal,oldVal){
console.log("更新后:"+newVal+","+"更新前:"+oldVal);
if (newVal) {
this.radio = newVal
}
}
},
methods:{
update(){
//input是默认双向绑定事件,select控件也可以用input给父组件传递数据
this.$emit('input',this.radio)
}
}
}
</script>
<style>
</style
父组件使用
<template>
<div class="fill_in_box">
<el-dialog title="填报详情" :visible.sync="formVisible" append-to-body width="70%">
<div class="form_detial">
<div class="end_time">填报截止时间:2022-09-23 12:23</div>
<el-scrollbar style="height:100%">
<div class="content">
<!-- 表单内容 -->
<div class="form_box">
<div class="borderBox">
<radioGroup v-model="test" :radioList="arr" @input="change"></radioGroup>
</div>
</div>
</div>
</el-scrollbar>
</div>
</el-dialog>
</div>
</template>
<script>
import radioGroup from '@/views/InputComponents/radioGroup.vue'
export default {
data(){
return{
formVisible: true,
test:'',
arr:[{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
},
]
}
},
components:{
radioGroup
},
methods:{
show(){
this.formVisible = true
},
change(){
console.log("11111111",this.test);
}
}
}
</script>