Vue.js 如何在vuejs的父组件方法中返回子组件html？

我有一个父组件BootstrapSelectCountryElement，用于加载引导选择选择器：

<template>
    <select
        class="custom-select-picker"
        v-model="code"
        required
        data-live-search="true"
        default="US"
    >
        <option
            v-for="country in countries"
            :key="country.id"
            :value="country.iso"
            :data-id="country.id"
            :data-content="getContent(country)"
        >{{ country.name }} {{ country.calling_code }}</option>
    </select>
</template>

<script>
import BootstrapContentWithSubText from "./BootstrapContentWithSubText";

export default {
    props: ["selectName", "className"],
    components: {
        BootstrapContentWithSubText,
    },
    data() {
        return {
            code: "US",
        };
    },
    computed: {
        countries() {
            return this.$store.state.country.capabilities.data;
        },
    },
    methods: {
        getContent(country) {
            //return 'BootstrapContentWithSubText' component html
            // return "<bootstrap-content-with-sub-text country='" + country + "'/>";
        },
    },
    watch: {
        code(value) {
            this.$emit("update", {
                id: $(this.$el).find("option:selected").data("id"),
                iso: value,
            });
        },
    },
};
</script>

{{country.name}{{country.calling_code}}
从“/BootstrapContentWithSubText”导入bootstrapcontwithsubtext”；
导出默认值{
道具：[“selectName”，“className”]，
组成部分：{
BootstrapContentWithSubText，
},
数据（）{
返回{
代码：“美国”，
};
},
计算：{
国家（）{
返回此。$store.state.country.capabilities.data；
},
},
方法：{
getContent（国家）{
//返回“BootstrapContentWithSubText”组件html
//返回“”；
},
},
观察：{
代码（值）{
此.$emit（“更新”{
id:$（this.$el）.find（“选项：选定”）.data（“id”），
iso：价值，
});
},
},
};

在childBootstrapContentWithSubText组件中，我返回带有子文本的bootstrap select选项的内容

<template>
    <div>
        <span :class="flagIcon(country.iso)"></span>
        <span class="text">
            {{country.name}} {{country.calling_code}}
            <span class="text-muted">
                <span
                    class="badge badge-outer"
                    v-for="(provider, numberTypeArray) in country.capabilities"
                    :key="provider"
                >
                    <span class="badge badge-dark">{{provider}}</span>
                    <span
                        class="badge badge-success"
                        v-for="(numberType, item) in numberTypeArray"
                        :key="item.id"
                    >
                        <span class="badge badge-success">{{numberType}}</span>
                        <span class="badge badge-light" v-if="item.is_voice_available">voice</span>
                        <span class="badge badge-light" v-if="item.is_sms_available">sms</span>
                        <span class="badge badge-light" v-if="item.is_mms_available">mms</span>
                    </span>
                </span>
            </span>
        </span>
    </div>
</template>

<script>
export default {
    props: ["country"],
    methods: {
        flagIcon(iso) {
            return "flag-icon flag-icon-" + iso.toLowerCase();
        },
    },
};
</script>

{{country.name}{{country.calling{u code}}
{{provider}}
{{numberType}
嗓音
短讯服务
彩信
导出默认值{
道具：[“国家”]，
方法：{
旗标图标（iso）{
返回“flag-icon-flag-icon-”+iso.toLowerCase（）；
},
},
};

---

在父组件中，我希望使用

getContent（）

方法动态加载内容。如果子组件具有

国家/地区

道具，如何呈现子组件html。

您可以尝试

this.$el.innerHTML

或