Home > front end >  Vue: how to pass props when dynamically creating a component?
Vue: how to pass props when dynamically creating a component?

Time:10-08

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.

CodePudding user response:

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

  • Related