<!-- 用栅格布局实现的单选框 -->
<template><!--v-model默认绑定:value="value"  @change="value = $event.target.value"--><el-radio-group :value="value" @input="handleChange" style="width: 100%"><el-row><el-colv-for="option in options":key="option.label":span="span"style="min-width: 150px"><el-radio :label="option.value" :border="border" :size="radioSize">{{ option.text }}</el-radio></el-col></el-row></el-radio-group>
</template><script>
export default {name: "GridRadio",props: {/*父子组件传值 类型可以是string bool 数字型登登*/value: { type: String | Number | Boolean, required: true, default: null },/*同上*/options: { type: Array, required: true },/*同上*/border: { type: Boolean, default: false },/*同上*/span: { type: Number, default: 4 },/*控制大小*/radioSize: { type: String, default: "medium" }},/*只是把父亲的绑定的value数值变成value 父亲的v-model的方法变为change的* 当自己的数值变化的时候 触发父亲的事件 change*/model: {/*改变默认得事件 :value="value" @change="value = $event.target.value"*/event: "change",prop: "value"},data() {return {};},methods: {handleChange(val) {/*绑定change事件*//*数值绑定change得事件可以进行传值*/this.$emit("change", val);console.log(1)}}
};
</script><style scoped></style>

  /*只是把父亲的绑定的value数值变成value 父亲的v-model的方法变为change的
  * 当自己的数值变化的时候 触发父亲的事件 change*/