web-dev-qa-db-fra.com

Comment remonter un composant?

J'ai un composant qui est monté dans le cadre du rendu DOM. Le squelette de l'application est

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
      <button>press this button to reload the component</button>
    </div>
  </body>
</html>

<my-component> Est fonctionnel (il affiche quelques entrées de formulaire) et les données $emit Au parent.

Existe-t-il un moyen de le remonter? Le but est d'avoir un contenu de composant et de le configurer comme s'il venait d'être rendu pour la première fois (y compris une réinitialisation des éléments data() qui maintiennent son état).

Il y a quelques solutions à cela mais ils supposent tous une réécriture de data(), que j'aimerais éviter.

Ma compréhension est qu'un composant est en fait du code HTML/CSS/JS injecté dans le dom au bon endroit pendant le rendu, donc je crains que le concept de "re-montage" n'existe pas - je voulais juste m'assurer avant d'aller la méthode data () - réécriture.

vue.jsvuejs2vue-component
15
WoJ

J'ai dû le faire avec un composant de table qui ne pensait pas inclure un moyen de modifier les données. L'astuce consiste à modifier la clé. Lorsque la clé change, vue le considère comme un composant différent. Voir l'exemple, le crochet created() ne fonctionnera qu'une seule fois, donc si vous voyez la valeur changer, vous êtes voir un tout nouvel objet.

exemple:

Vue.component('my-component', {
  template: `<div>{{ Rand }}</div>`,
  data() {
    return {
      Rand: ''
    }
  },
  created() {
    this.Rand = Math.round(Math.random() * 1000)
  }
});

new Vue({
  el: '#app',
  data: {
    componentKey:0
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>

<div id="app">
  <my-component :key="componentKey"></my-component>
  <button @click="componentKey++">press this button to reload the component</button>
</div>
37
Daniel