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

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

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

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

this.$delete(this)

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

Вместо удаления вашего компонента из его родительского элемента вы все равно можете использовать v-if в первом <div> самого компонента. Это оставит пустой компонент на вашей странице, и это не лучшая практика, но может избежать обработки событий от родителя.

Ответ 4

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

beforeDestroy () {
  this.$root.$el.parentNode.removeChild(this.$root.$el)
},