vue 基于v-model 双向绑定原理 二次封装el-radio-group组件

封装组件`

<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>