Как я могу создать новые экземпляры компонента Vue и частично уничтожить их с помощью методов?
Я пытаюсь динамически добавлять компоненты в DOM при вводе пользователем. У меня фактически есть ситуация с ±200 кнопками/триггерами, которые при нажатии должны создать / показать экземпляр childComponent(который является своего рода infowindow/modal).
Мне также нужно будет иметь возможность удалить / скрыть их позже, когда пользователь "закроет" компонент.
Я представляю себе что-то вроде этого?
<template>
<div ref="container">
<button @click="createComponent(1)" />
...
<button @click="createComponent(n)" />
<childComponent ref="cc53" :num="53" v-on:kill="destroyComponent" />
...
<childComponent ref="ccn" :num="n" v-on:kill="destroyComponent"/>
</div>
</template>
<script>
import childComponent from '@/components/ChildComponent'
export default {
components: {childComponent},
methods: {
createComponent (num) {
// How do I create an instance of childComponent with prop 'num' and add it to this.$refs.container?
},
destroyComponent (vRef) {
// How do I destroy an instance of childComponent?
this.vRef.$destroy();
}
}
}
</script>
Количество возможных childComponentих, но вашему типичному пользователю, вероятно, нужно будет смотреть только на несколько, и, конечно, только на несколько одновременно.
Мои вопросы:
Во-первых, учитывая, что их ±200, есть ли какое-либо преимущество в производительности только для динамического создания экземпляров по мере необходимости, по сравнению v-showциклических childComponentsи пусть Vue управляет DOM?
Во-вторых, даже если childComponents-это путь для этого конкретного случая, как можно справиться с этим, если общее количество возможных дочерних компонентов неизвестно или динамично? Это работа для рендеринга функций и JSX ?
Ответы - Как я могу создать новые экземпляры компонента Vue и частично уничтожить их с помощью методов? / How do I create new instances of a Vue component, and subsuqently destroy them, with methods?
13.09.2019 07:46:06
Если я понимаю, вы хотите отобразить список того же компонента, который принимает :numв качестве опоры.
Во-первых, вы должны иметь в виду, что Vue-это "приложение , управляемое данными", что означает, что вам нужно представить свой список как данные в arrayили object, в вашем случае вы можете использовать массив myListи v-forдля отображения списка дочерних компонентов в шаблоне.
Операции добавления и удаления должны быть выполнены на массиве myListсамостоятельно, после этого он будет автоматически применен к вашему шаблону.
- Чтобы добавить новый экземпляр, просто используйте
myList.push(n) - Чтобы удалить экземпляр, используйте
myLsit.splice(myLsit.indexOf(n), 1);
Результат должен выглядеть так :
<template>
<input v-model="inputId" />
<button @click="addItem(inputId)">Add Item</button>
<childComponent
v-for="itemId in myList"
:key="itemId"
:ref="'cc' + itemId"
:num="itemId"
@kill="removeItem(itemId)"
/>
</template>
<script>
data(){
return{
inputId : 0,
myList : []
}
},
methods:{
addItem(id){
this.myList.push(id)
},
removeItem(id){
this.myLsit.splice(this.myLsit.indexOf(id), 1)
}
}
</script>
Пс :
- Не проверял код, если есть какие-либо ошибки просто скажите мне
@killкомпонентом,childComponent- Вот отличный учебник, чтобы лучше понять
$emit('kill', this.num)