Vue: как передавать реквизиты при динамическом создании компонента?

#vue.js #vuejs2

Вопрос:

Я создаю компонент динамически (после нажатия кнопки), используя этот обычно используемый учебник. Основным кодом является:

 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)
 

Однако для моего компонента Building_Info требуется опора. Как я могу его передать? Альтернативные способы динамического создания компонентов приветствуются, хотя в идеале они поддерживали бы компоненты с одним файлом.

Примечание: есть несколько вопросов SO о динамических реквизитах, но я не вижу ни одного, который отвечал бы на этот вопрос.

Ответ №1:

Конструктор, возвращаемый из Vue.extend (т. е. Building_Info_Class ), может получить объект инициализации, содержащий propsData свойство с начальными значениями prop:

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

ДЕМОНСТРАЦИЯ

Комментарии:

1. Спасибо, это работает!