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

题目起得不太好,请看描述:

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

const item = {
  component: 'Button',
  componentProps: {
    onClick: () => {
      // doSometing
    },
  },
},
<component :is="item.component" v-bind="item.componentProps"></component>

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

阅读 2.2k
3 个回答

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

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

组件中

export default {
  props: {
    componentProps: {
      type: Object,
      default: () => {}
    },
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题