Как добавить динамические компоненты/частичные элементы в Vue.js

Question

Мне нужно динамически добавлять дочерние компоненты к компоненту на основе взаимодействия с пользователем. Я посмотрел на old issue, но для меня это выглядит грязным взломом, кроме того, это старая проблема, и vue-разработка действительно активна, поэтому я не знаю, есть ли сейчас лучший подход.

То, что я пробовал до сих пор, находится на this fiddle, но, очевидно, не работает, говорится, что $mount можно назвать только один раз. Я не знаю, как это сделать, мой другой вариант был бы динамическим компонентом, но для этого мне также пришлось бы добавить элемент <component> динамически, поэтому он будет почти такой же проблемой.

Так как я могу добавить компонент на клик клик или другое событие клиента?

Answer 1

Вы хотите установить компоненты с самого начала и использовать v-if или v-for, чтобы отображать, скрывать, добавлять или вычитать эти компоненты. Вы позволяете данным управлять DOM, а не управлять DOM самостоятельно. Fiddle пример: https://jsfiddle.net/f5n5z5oo/2/

Вы можете даже сделать компоненты динамически изменять какой тип компонента они используют is:

data: { 
    elements: [ 
    { type: 'component-a' }, 
    { type: 'component-b' } 
    ] 
} 
<div v-for="element in elements" :is="element.type"></div> 

Если вы более конкретно об использовании случае я постараюсь помочь дальше!

Answer 2

Надеется, что это поможет кому-то в будущем: Есть множество способов сделать это, я буду обновлять ответ с более методами, как я получаю время ниже один из способов сделать это:

1. Если компонент уже определены, просто добавив новый экземпляр компонента важно, используя ключевое слово parent определить родительский компонент, например, как показано ниже: проверить codepen

var Child = Vue.extend({ 
    template: '<div>Hello!</div>', 
}); 

new Vue({ 
    el: '#demo', 
    ready: function() { 
    var child = new Child({ 
     el: this.$el.querySelector('.child-host'), 
     parent: this, 
    }); 
    }, 
});