Как я могу создать новые экземпляры компонента Vue и частично уничтожить их с помощью методов?


Как я могу создать новые экземпляры компонента Vue и частично уничтожить их с помощью методов?

13.09.2019 06:21:30 Просмотров 143 Источник

Я пытаюсь динамически добавлять компоненты в 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?

Является ответом!
user443917

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>

Пс :

Farsad

14.09.2019 08:41:24

Помочь в развитии проекта:
Закрыть X