vue 动态组件传参 - Githubissues

huangshuwei commented 5 years ago

前言

现有个场景需要使用动态组件，但是传参问题无法很好的解决。今天尝试了一种方案还不错，特此记录下

启发思路来自以下等价方式

<component
        :is="currentComp"
        v-bind="{name:'abc',address:'xxx'}"/>

等价于

<component
        :is="currentComp"
        :name="abc"
        :address="xxx"/>

动态组件封装

约定将所有组件的传参都通过对象的形式

// dynamic-comp.vue
<template>
    <component
        :is="currentComp"
        v-bind="propsOption"/>
</template>

<script>
    export default {
        name: "DynamicComp",
        props: {
            currentComp: {
                type: String,
                required: true
            },
            // props 以对象方式传递
            propsOption: {
                type: Object,
                required: false,
                validator:function (val) {

                    return Object.prototype.toString.apply(val) === "[object Object]"
                }
            }
        }
    }
</script>

使用

// any.vue
<template>
    <dynamic-comp
        :props-option="propsOption"
        current-comp="testComp"/>
</template>
<script>
    import dynamicComp from './dynamic-comp'

    export default {
        components: {dynamicComp},
        data() {

            return {
                propsOption: {
                    prop1: "tome",
                    prop2: 123
                }
            }
        }
    }
</script>

完

konnga commented 4 years ago

请问，如果是获取后端数据后，如何传递props给动态组件？

huangshuwei commented 4 years ago

请问，如果是获取后端数据后，如何传递props给动态组件？

这有个例子，我试了下是可以的。如果是异步条件可以考虑将动态组件的propsOption属性改为非必填示例： https://codesandbox.io/s/focused-cherry-8wj6l?file=/src/App.vue

huangshuwei / blog

vue 动态组件传参 #28

前言