Passer des données aux composants dans vue.js

J’ai du mal à comprendre comment transmettre des données entre composants dans vue.js. J’ai lu plusieurs fois les documents et j’ai examiné de nombreuses questions et didacticiels relatifs à la vue, mais je ne les comprends toujours pas.

Pour en venir à bout, j’espère avoir de l’aide pour compléter un exemple assez simple

  1. afficher une liste d’utilisateurs dans un composant (terminé)
  2. envoyer les données utilisateur à un nouveau composant en cliquant sur un lien (terminé) – voir mise à jour en bas.
  3. éditer les données de l’utilisateur et les renvoyer au composant d’origine (pas encore arrivé)

Voici un violon qui échoue à la deuxième étape: https://jsfiddle.net/retrogradeMT/d1a8hps0/

Je comprends que je dois utiliser des accessoires pour transmettre des données au nouveau composant, mais je ne suis pas sûr de savoir comment le faire fonctionnellement. Comment relier les données au nouveau composant?

HTML:

js pour le composant principal:

 Vue.component('app-page', { template: '#userBlock', data: function() { return{ users: [] } }, ready: function () { this.fetchUsers(); }, methods: { fetchUsers: function(){ var users = [ { id: 1, name: 'tom' }, { id: 2, name: 'brian' }, { id: 3, name: 'sam' }, ]; this.$set('users', users); } } }) 

JS pour le deuxième composant:

 Vue.component('newtemp', { template: '#newtemp', props: 'name', data: function() { return { name: name, } }, }) 

METTRE À JOUR

Ok, j’ai le deuxième pas compris. Voici un nouveau violon montrant les progrès: https://jsfiddle.net/retrogradeMT/9pffnmjp/

Comme j’utilise Vue-router, je n’utilise pas d’accessoires pour envoyer les données à un nouveau composant. Au lieu de cela, j’ai besoin de définir des parameters sur le v-link, puis d’utiliser un crochet de transition pour l’accepter.

Les modifications de la liaison virtuelle permettent de voir les routes nommées dans la vue-router docs :

  Show new component 

Ensuite, sur le composant, ajoutez des données aux options de routage, voir les crochets de transition :

 Vue.component('newtemp', { template: '#newtemp', route: { data: function(transition) { transition.next({ // saving the id which is passed in url name: transition.to.params.name }); } }, data: function() { return { name:name, } }, }) 

————- La suite s’applique uniquement à Vue 1 ————–

La transmission de données peut être effectuée de plusieurs manières. La méthode dépend du type d’utilisation.


Si vous souhaitez transmettre des données à partir de votre code HTML lorsque vous ajoutez un nouveau composant. Cela se fait en utilisant des accessoires.

  

Cette valeur de prop ne sera disponible pour votre composant que si vous ajoutez le nom prop-name à votre atsortingbut props .


Lorsque des données sont transmises d’un composant à un autre en raison d’un événement dynamic ou statique. Cela se fait en utilisant des répartiteurs d’événements et des diffuseurs. Donc, par exemple, si vous avez une structure de composant comme celle-ci:

     

Et vous voulez envoyer des données de à alors dans vous devrez envoyer un événement:

 this.$dispatch('event_name', data); 

Cet événement parcourra toute la chaîne parente. Et quel que soit le parent auquel vous avez une twig vers vous diffusez l’événement avec les données. Donc dans le parent:

 events:{ 'event_name' : function(data){ this.$broadcast('event_name', data); }, 

Maintenant, cette émission parcourra la chaîne des enfants. Et quel que soit l’enfant auquel vous voulez récupérer l’événement, dans notre cas nous appendons un autre événement:

 events: { 'event_name' : function(data){ // Your code. }, }, 

La troisième manière de transmettre des données passe par les parameters des v-links. Cette méthode est utilisée lorsque les chaînes de composants sont complètement détruites ou dans les cas où l’URI change. Et je peux voir que vous les comprenez déjà.


Décidez du type de communication de données que vous souhaitez et choisissez de manière appropriée.

Je pense que le problème est ici:

  

Lorsque vous préfixez le prop avec : vous indiquez à Vue qu’il s’agit d’une variable et non d’une chaîne. Donc, vous n’avez pas besoin de {{}} user.name . Essayer:

  

MODIFIER—–

Ce qui précède est vrai, mais le plus gros problème est que lorsque vous modifiez l’URL et accédez à un nouvel itinéraire, le composant d’origine disparaît. Pour que le second composant modifie les données parentes, le deuxième composant doit être un composant enfant du premier ou simplement une partie du même composant.

La meilleure façon d’envoyer des données d’un composant parent à un enfant consiste à utiliser des accessoires .

Passer des données de parent à enfant via des props

  • Déclarez les props (tableau ou object ) chez l’enfant
  • Passez-le à l’enfant via

Voir la démo ci-dessous:

 Vue.component('child-comp', { props: ['message'], // declare the props template: '

At child-comp, using props in the template: {{ message }}

', mounted: function () { console.log('The props are also available in JS:', this.message); } }) new Vue({ el: '#app', data: { variableAtParent: 'DATA FROM PARENT!' } })
  

At Parent: {{ variableAtParent }}

J’ai trouvé un moyen de transmettre les données des parents à la scope du composant dans Vue, je pense que c’est un peu un bidouillage, mais peut-être que cela vous aidera.

1) Données de référence dans Vue Instance en tant qu’object externe (data : dataObj)

2) Ensuite, dans la fonction de retour de données dans le composant enfant, il suffit de renvoyer parentScope = dataObj et voila. Vous pouvez maintenant faire des choses comme {{ parentScope.prop }} et travailler comme un charme.

Bonne chance!

Une variable JS globale (object) peut être utilisée pour transmettre des données entre composants. Exemple: transmission de données d’Ammlogin.vue à Options.vue. Dans Ammlogin.vue, rspData est défini sur la réponse du serveur. Dans Options.vue, la réponse du serveur est disponible via rspData.

index.html:

  

Ammlogin.vue:

 .... export default { data: function() {return vueData}, methods: { login: function(event){ event.preventDefault(); // otherwise the page is submitted... vueData.errortxt = ""; axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password}) .then(function (response) { vueData.user = ''; vueData.password = ''; // activate v-link via JS click... // JSON.parse is not needed because it is already an object if (response.data.result === "ok") { rspData = response.data; // set global rspData document.getElementById("loginid").click(); } else { vueData.errortxt = "Felaktig avändare eller lösenord!" } }) .catch(function (error) { // Wu oh! Something went wrong vueData.errortxt = error.message; }); }, .... 

Options.vue: