Comment envoyer des données d'un composant à un autre après avoir cliqué sur le bouton Vuejs

Question

J'ai deux composants un composant utilisateur et dans le composant utilisateur il y a modification du composant utilisateur (boîte Modal), donc mon problème est de savoir comment passer l'objet utilisateur à éditer composant utilisateur après avoir cliqué sur le bouton Modifier l'utilisateur.

vue utilisateur

<div> 
    <v-layout row wrap> 
     <v-flex sm3 xs2 v-for="user in users"> 
      <v-card> 
       <v-card-media src="https://vuetifyjs.com/static/doc-images/cards/plane.jpg" 
           height="200px"> 
       </v-card-media> 
       <v-card-title primary-title> 
        <div> 
         <h3 class="headline mb-0">{{user.name}}</h3> 
         <div><b>Email : </b>{{user.email}}</div> 
        </div> 
       </v-card-title> 
       <v-card-actions> 
        <v-spacer></v-spacer> 
        <v-btn primary dark @click="editUser(user)">Edit</v-btn> 
        <v-btn error dark>View</v-btn> 
       </v-card-actions> 
      </v-card> 
     </v-flex> 
    </v-layout> 

    <edit-modal></edit-modal> 

</div> 

modifier modal

<v-layout row justify-center> 
    <v-dialog persistent width="30%"> 
     <v-card> 
      <v-card-title> 
       <span class="headline">User Profile</span> 
      </v-card-title> 
      <v-card-text> 
       <v-container grid-list-md> 
        <v-layout wrap> 
         <v-flex xs12 sm6 md12> 
          <v-text-field label="Legal first name" required></v-text-field> 
         </v-flex> 
         <v-flex xs12 md6> 
          <v-text-field label="Email" required ></v-text-field> 
         </v-flex> 
        </v-layout> 
       </v-container> 
       <small>*indicates required field</small> 
      </v-card-text> 
      <v-card-actions> 
       <v-spacer></v-spacer> 
       <v-btn light @click.native="dialog">Close</v-btn> 
       <v-btn primary @click.native="saveUser">Save</v-btn> 
      </v-card-actions> 
     </v-card> 
    </v-dialog> 
</v-layout> 

Screen shot

Answer 1

Ce que vous pouvez faire est de définir d'abord un modèle utilisateur vide dans le composant utilisateur qui est tout comme le objet fictif et le passer comme un accessoire pour éditer le composant modal d 'utilisation v pour cacher et montrer le modèle:

<edit-modal v-if="isShowModel" :userObj="userObj"></edit-modal> 

en partie script:

data() { 
    return { 
     userObj: { 
      name: '', 
      email: '' 
     }, 
     isShowModel: false 
    } 
}, 
methods: { 
    editUser(user) { 
    this.userObj.name = user.name; 
    this.userObj.email = user.email; 
    this.isShowModel = true; 
    } 
} 

Dans l'accès modifier des composants avec des accessoires:

props:['userObj'], 
data() { 
    return { 
    newUserObj: Object.assign({}, this.userObj), 
    } 
} 

Cela fonctionne. Mais il y a une autre méthode que vous pouvez utiliser refs $ aussi Donner un attribut ref à modifier modal:

<edit-modal ref="editme"></edit-modal> 

ensuite dans le script d'accès partiel cette ref:

methods: { 
    editUser(user) { 
    this.$refs.editme.name = user.name; 
    this.$refs.editme.email = user.email; 
    } 
} 

Dans le composant d'édition définissent le nom et e-mail dans les données()

data() { 
    return { 
     name: '', 
     email: '' 
    } 
} 

maintenant de mettre à jour ces valeurs modifiées dans le composant de parent, vous pouvez utiliser $ émettre:

<v-btn primary @click.native="saveUser">Save</v-btn> 

dans le script:

methods: { 
    saveUser() { 
    this.$emit('onEditValue', this.name, this.email); 
    } 
} 

En composant parent:

<edit-modal 
    ref="editme" 
    @onEditValue="editCall" 
></edit-modal> 

dans le script:

methods: { 
    editCall(name, email) { 
    this.user.name = name; 
    this.user.email = email; 
    } 
} 

Answer 2

Si les deux composants sont frères et soeurs, vous pouvez utiliser Event Bus fourni par Vuejs

Reference Link