前端工作总结281-v-model实战

<!-- 用栅格布局实现的单选框 -->
<template>
  <!--v-model默认绑定:value="value"  @change="value = $event.target.value"-->
  <el-radio-group :value="value" @input="handleChange" style="width: 100%">
    <el-row>
      <el-col
        v-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*/