Для этого «Vue способ» обычно включает использование v-if, v-for или <component>, в зависимости от что вы хотите сделать:
- Используйте
v-if, чтобы условно показать компонент / элемент на основе условия. - Используйте
v-for, чтобы отобразить список компонентов / элементов. - Используйте
<component> для визуализации динамического c компонента / элемента.
Таким образом, для достижения того, что вы описали в своем вопросе, вы можете объявить логическое свойство данных visible например:
data() {
return {
visible: false
}
}
и использовать его с v-if для управления видимостью компонента в шаблоне:
<mycomponent v-if="visible"></mycomponent>
Для этого необходимо, чтобы <mycomponent> существовало в шаблоне заранее. , Если вы не знаете, какой компонент вы хотите показать, то вы можете либо включить каждую возможность в шаблон и отобразить ту, которая вам нужна, на основании некоторого условия:
<comp1 v-if="comp1Visible"></comp1>
<comp2 v-if="comp2Visible"></comp2>
<comp3 v-if="comp3Visible"></comp3>
или вы можете использовать <component> вместе с другим свойством данных (comp), которое вы можете установить для имени компонента, который вы хотите отобразить:
<component v-if="visible" :is="comp"></component>
То, что вы описали (document.createElement, а затем el.appendChild), делает не существует в Vue. Vue имеет строгий механизм рендеринга, с которым вам нужно работать; невозможно динамически создавать компоненты и вставлять их в DOM случайным образом. Технически вы можете сделать comp = new Vue() как эквивалент document.createElement, а затем el.appendChild(comp.$el), но это, вероятно, не то, что вы хотите сделать, потому что вы будете создавать независимый Vue экземпляр, который вы пришлось бы управлять вручную без простого способа передачи данных.