vue的动态组件component传参

Question

vue的动态组件component在使用时，如果需要展示的是两个完全不同的组件，那么props怎么传递，将两个组件所需要的props都在component组件上一次传递吗
比如：A组件接受啊a,b,c;B组件接受d,e,f，那在使用component时是像下面一样使用吗（这样使用我测了下是可以的，但不知道有没有什么风险）。

<component 
:is="currentSelect" 
:a="a"
:b="b" 
:c="c" 
:d="d" 
:e="e" 
:f="f"
></component>

Answer 1

你这要是每种组件有二十个参数要传、有个七八种组件可咋整？这么写得累死。

包装成一个大对象就可以了：

<component 
  :is="currentSelect" 
  v-bind="currentSelectProps"
></component>

<script>
export default {
  data() {
    // 仅做举例，这些值到底咋来的看你自己业务需要
    let currentSelect;
    let currentSelectProps;
    switch (currentSelect) {
      case 'A':
        currentSelectProps = { a: 'foo', b: 'bar', c: 'baz' };
        break;
      case 'B':
        currentSelectProps = { d: 1, e: 2, f: 3 };
        break;
    }

    return {
      currentSelect,
      currentSelectProps
    }
  }
}
</script>

Answer 2

风险可能就是别人一眼看过去不知道什么组件要什么props，我觉得一个比较好的做法可以考虑直接v-bind，值可以是computed，类似但不限于：

<component 
:is="currentSelect" 
v-bind="nestedProps"
></component>

//...省略
computed: {
    currentSelect() {
        switch(this.someState) {
            case 'A':
                return 'AC'
            default:
                return 'DC'
        }
    },
    nestedProps() {
        switch(this.someState) {
            case 'A':
                return {
                    a: 'name',
                    b: 101,
                }
            default:
                return {
                    d: true,
                    e: []
                }
        }
    }
}
//...省略

在甚至合并成一个computed，能体现动态组件和参数间的关系，从他人的角度来看就好很多。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。