как компонент может удалить себя в Vue 2.0

как заголовок, как я могу это сделать

из официальной документации просто сообщите нам, что $ delete может использовать аргумент 'object' и 'key'

но я хочу удалить компонент как таковой

this.$delete(this)

vue.js vue-component
person Ciao    schedule 06.11.2016    source источник
comment
Я видел это раньше. Это похоже на дежавю ...   -  person RQDQ    schedule 06.11.2016

Ответы (3)


arrow_upward
37
arrow_downward

Нет, вы не сможете удалить компонент напрямую. Родительский компонент должен будет использовать v-if для удаления дочернего компонента из DOM.

Ссылка: https://vuejs.org/v2/api/#v-if

Цитата из документов:

Условно визуализируйте элемент на основе правдивости значения выражения. Элемент и содержащиеся в нем директивы / компоненты уничтожаются и восстанавливаются во время переключений.

Если дочерний компонент создается как часть некоторого объекта данных в родительском элементе, вам нужно будет отправить событие родительскому объекту через $emit, изменить (или удалить) данные, и дочерний компонент исчезнет сам по себе. Недавно по этому поводу возник еще один вопрос: Удалить дочерний компонент Vue

person Mani    schedule 06.11.2016

arrow_upward
54
arrow_downward

Я не смог найти инструкций по полному удалению экземпляра Vue, поэтому вот что у меня получилось:

module.exports = {
  ...
  methods: {
    close () {
      // destroy the vue listeners, etc
      this.$destroy();

      // remove the element from the DOM
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};

Vue 3 в основном то же самое, но вы должны использовать root из аргумента контекста:

export default {
  setup(props, { root }){
    const close = () => {
      root.$destroy();
      root.$el.parentNode.removeChild(root.$el);
    };
    return { close };
  }
}

И в Vue 2, и в Vue 3 вы можете использовать созданный вами экземпляр:

const instance = new Vue({ ... });
...
instance.$destroy();
instance.$el.parentNode.removeChild(instance.$el);
person bendytree    schedule 27.03.2019
comment
Чтобы удалить элемент DOM, я сделал следующее, и он отлично работает: root. $ El.remove (root. $ El); Нет необходимости в parentNode и Child (сэкономленное место). Протестировано в FF / Chrome / Safari - person Xerix; 27.11.2020

arrow_upward
4
arrow_downward

Вы можете использовать метод beforeDestroy для компонента и заставить его удалить себя из DOM.

beforeDestroy () {
  this.$root.$el.parentNode.removeChild(this.$root.$el)
},
person HastingsDirect    schedule 28.08.2019
comment
Спасибо за подсказку. В моем случае использование вашего кода не работает. Мне пришлось использовать это: beforeDestroy () { this.$el.parentNode.removeChild(this.$el) }, Не могли бы вы дать мне подсказку, почему вы использовали $root вместо кода, предложенного @bendytree? - person Merc; 10.04.2020
comment
Это будет зависеть от архитектуры вашего приложения, я думаю, что теперь вам нужно будет использовать $root, если это единственный компонент на странице, но если это вложенный компонент, вы не захотите использовать $root. Более важный бит - использование beforeDestroy, который срабатывает непосредственно перед естественным уничтожением компонента. - person HastingsDirect; 15.04.2020