Version

2.7.0

Reproduction link

codesandbox.io

Steps to reproduce

向大家问好并祝贺大家的出色工作。受到这个网页( https://css-tricks.com/creating-vue-js-component-instances-programmatically )的启发，我尝试在运行时创建并向我的一个模板中添加自定义组件。
总之，我需要在运行时插入包含标准 Vue 组件(例如 v-switch 或 v-radio-group)的自定义组件。
这是我为其中一个包含 v-switches 的自定义组件所做的事情：
子 .ts 文件：

export default class CheckboxComponent extends Vue {
    @Prop({required: false, type: Boolean, default: null})
    public defaultValue: boolean;

    @Prop({required: true, type: Number, default: 0})
    public id: number;

    @Prop({required: true, type: String, default: ""})
    public label: string;

    public yes: boolean = false;
    public no: boolean = false;

子 .vue 文件：

<template>
    <v-row dense>
        <v-col cols="8">
            {{ label }}
        </v-col>

        <v-col cols="2">
            <v-switch
                v-model="yes"
                label="Yes"
                color="success"
            />
        </v-col>

        <v-col cols="2">
            <v-switch
                v-model="no"
                label="No"
                color="red"
            />
        </v-col>
    </v-row>
</template>

父 .ts 文件：

let CheckboxClass = Vue.extend(CheckboxComponent);
    let checkbox = new CheckboxClass({
        propsData: { id: 1, value: null, label: "Some checkbox" }
    });

    checkbox.$mount();
    (this.$refs.container as HTMLElement).appendChild(checkbox.$el);
    checkbox.$on("change", this.onCheckboxValueChanged);

这运行得非常好：https://i.stack.imgur.com/mRhzS.png
但是，如果我尝试用 v-radio-groups 做同样的事情，它会变成这样：
子 .ts 文件：

export default class RadioButtonComponent extends Vue {
    @Prop({required: false, type: String, default: null})
    public defaultValue: string;

    @Prop({required: true, type: Number, default: 0})
    public id: number;

    @Prop({required: true, type: String, default: ""})
    public label: string;

    @Prop({required: true, type: Array, default: () => []})
    public options: string[];

子 .vue 文件：

<template>
    <v-row dense>
        <v-col cols="6">
            {{ label }}
        </v-col>

        <v-col cols="6">
            <v-radio-group
                v-model="value"
                mandatory
                row
            >
                <v-radio
                    v-for="(option, index) in options"
                    :key="index"
                    :label="option"
                    :value="option"
                />
            </v-radio-group>
        </v-col>
    </v-row>
</template>

父 .ts 文件：

let RadioButtonClass = Vue.extend(RadioButtonComponent);
    let radioButton = new RadioButtonClass({
        propsData: { id: 2, defaultValue: "One", label: "Some radio button", options: ["One", "Two", "Three", "Four"] }
        });

    radioButton.$mount();
    (this.$refs.container as HTMLElement).appendChild(radioButton.$el);
    radioButton.$on("change", this.onRadioButtonValueChanged);

但它是这样渲染的：https://i.stack.imgur.com/LX8s2.png

预期结果是什么？

我期望 v-radio-boxes 能够正确显示，就像 v-switches 一样。

实际发生的情况是什么？

让我解释一下我发现的结果，将其与添加到“常规”v-radio-group 的结果进行比较。似乎所有错误都来自 v-input-selection 的样式：
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light accent--text"\>$radioOn</i\>
如您所见，$radioOn 直接站在插槽中，而插槽本应为空，此外该类看起来也不对，因为无论选项是否被选中，它都应该是 mdi mdi-radiobox-blank 或 mdi mdi-radiobox-marked。
如果我手动编辑样式以获得正确的样式，然后我会得到 https://i.stack.imgur.com/127ff.png。所以，我的问题是：

• 是 Vue.extend 中的一个错误，改变了标准的 v-radio-group 行为(我在控制台中打印出来，创建的对象 radioButton 已经具有错误的值)吗？
• 还是它是有意为之，以便让开发人员自定义他们的组件，在这种情况下，我肯定漏掉了什么。

我还尝试使用 v-checkbox 实现相同的实现，结果与 v-radio-group 相同。
我还尝试在 CodeSandbox 中重现开发环境，但无法使用 Vue 3 编译：/