在vue2中该如何实现

在 Vue.js 2.x 版本中，如果你想要自定义渲染 Vue 元素如 `el-radio-group`，你可以使用 `Vue.extend` 动态创建一个 Component，并指定它的渲染函数 (`template` 或者 `render` 函数)。这里我们以 `render` 函数为例说明：

import Vue from 'vue';

// 定义一个 Vue 组件构造函数
const CustomRadioGroup = Vue.extend({
  name: 'CustomRadioGroup',
  props: {
    options: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  render(h) {
    return h('div', {
      class: 'custom-radio-group',
    }, this.options.map(option => {
      return h('el-radio', {
        key: option.value,
        props: {
          label: option.label,
          value: option.value,
        },
        on: {
          change: (value) => this.$emit('input', value),
        },
      });
    }));
  },
});

// 使用新创建的组件
new Vue({
  el: '#app',
  components: {
    CustomRadioGroup,
  },
  data() {
    return {
      selectedValue: '',
    };
  },
  methods: {
    handleRadioChange(value) {
      this.selectedValue = value;
    },
  },
  mounted() {
    // 初始化 radio group
    this.$refs.customRadioGroup.$emit('input', this.selectedValue);
  },
});

在这个示例中，我们首先定义了一个名为 `CustomRadioGroup` 的 Vue 构造函数，它接受一个 `options` 数组作为 prop。`render` 函数负责生成每个 `el-radio` 元素。当用户选择一个 radio 时，我们会触发 `input` 事件并将当前选中的值发送回父组件。