comment peut-composant supprimer lui-même en Vue 2.0

que le titre, comment puis-je le faire

de documentation officielle venez de nous dire que $supprimer pouvez utiliser l'argument de l '"objet" et "clé"

mais je veux supprimer un composant en lui-même comme il

this.$delete(this)
  • J'ai vu cela avant. Il se sent comme deja-vue...
InformationsquelleAutor Ciao | 2016-11-06
  1. 25

    Non, vous ne serez pas en mesure de supprimer un composant directement. Le composant parent devra utiliser v-if de retirer l'enfant de la composante du DOM.

    Ref: https://vuejs.org/v2/api/#v-if

    Cité de docs:

    Conditionnellement rendre l'élément basé sur le truthy-ness de la valeur de l'expression. L'élément et de ses contenus directives /on détruit les composants et re-construites au cours de la bascule.

    Si l'enfant composant est créé dans le cadre de certaines données sur l'objet parent, vous devez envoyer un événement de parent via $emit, de modifier (ou supprimer) les données et le composant enfant va disparaître sur son propre. Il y avait une autre question récemment: Supprimer une Vue de composant enfant

    InformationsquelleAutor Mani
  2. 15

    Je ne pouvais pas trouver des instructions sur la suppression complète d'une Vue de l'instance, alors, voici ce que je me suis retrouvé avec:

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

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

    Au lieu de la suppression de votre composant de son parent, vous pouvez toujours utiliser v-if sur la première <div> la balise dans le composant lui-même. Cela laisserait un élément vide dans votre page et c'est pas la meilleure pratique, mais peut éviter de manipuler les événements du parent.

    InformationsquelleAutor dnhyde
  4. 0

    Vous pouvez utiliser le beforeDestroy méthode sur le composant et de le rendre lui-même supprimer de la DOM.

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