Vue: how to pass props when dynamically creating a component?

Question

I'm creating a component dynamically (after a button click), using this commonly followed tutorial. The basic code is:

import Building_Info from './Info_Zone/Building'
var Building_Info_Class = Vue.extend(Building_Info)
var building_info_instance = new Building_Info_Class()
console.log(building_info_instance)
bulding_info_instance.$mount()
place_to_add_component.$el.appendChild(bulding_info_instance.$el)

However, my Building_Info component requires a prop. How can I pass it in? Alternative ways to dynamically creare components are welcome, though ideally they'd support Single File Components.

Note: there are several SO questions about dynamic props, but none I see that speak to this question.

tony19 · Accepted Answer · 2022-07-16 01:35:53Z

2

The constructor returned from Vue.extend (i.e., Building_Info_Class) can receive an initialization object, containing the propsData property with initial prop values:

var building_info_instance = new Building_Info_Class({
  propsData: {
    propA: '123',
    propB: true,
  }
})

demo

edited Jul 16, 2022 at 1:35

answered Oct 6, 2021 at 23:31

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tog22 Over a year ago

Thank you, that works!

Collectives™ on Stack Overflow

Vue: how to pass props when dynamically creating a component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related