Vue JS |组件转移

Question

想将组件作为变量传递。

例如： 我们有 3 个组件：A、B、C。

A.vue

<template>
<B>:redirect_object=C</B>
</template>
<script>
import B from "B";
import C from "C";
export default {
    name: "A",
    components: {B,C}
}

B.vue

...
<script>
export default {
    name: "B",
    props: {
        title: String,
        content: String,
        icon: String,
        redirect_object: Object // This var should contain coming component

    },
    methods: {
        do_redirect: function () {
            if (this.redirect_object)
                this.$store.commit('change_module', this.redirect_object)
        }
    }
}

C.vue

...
<script>
export default {
    name: "C"
}

所以。我想通过 A.vue 将 C.vue 组件转移到 B.vue 到 props 中的 redirect_object 变量中。

尝试在A中导入C组件，但我无法将其转移到B中。

Answer 1

为什么要这样做？我认为像这样传输组件不是一个好习惯。组件的一般做法是import组件中的组件（父-子）并动态加载具有:is属性的组件。

Docs with examples for dynamic components