怎样在Vue中实现通过JavaScript对象来动态传递组件Props

Question

题目起得不太好，请看描述：

想实现一个通过JavaScript对象来动态决定组件的功能：

const item = {
  component: 'Button',
  componentProps: {
    onClick: () => {
      // doSometing
    },
  },
},

<component :is="item.component" v-bind="item.componentProps"></component>

但是我遇到的困难就是Button组件的文字无法通过$attrs传递进去。在react中记得有一个children的props可以进行传递。这在vue中该如何实现？

Answer 1

一样，这也可以通过属性进行传递，比如你的componentProps中有个属性为text，他的值是记录button组件的值，那么你在Button组件中的props中接收一下这个属性，然后就可以正常使用了
<button>{{text}}</button>

Answer 2

https://cn.vuejs.org/v2/guide...

Answer 3

<component :is="item.component" :componentProps="item.componentProps"></component>

组件中

export default {
  props: {
    componentProps: {
      type: Object,
      default: () => {}
    },
  }
}