Comment implémenter une liaison unidirectionnelle dans l'objet passant du composant vue ?

Maintenant, je vais partager avec vous un exemple de liaison unidirectionnelle dans l'objet passé par le composant Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Lors de l'utilisation de composants vue, il est souvent nécessaire de transférer des données entre composants. Nous ne discuterons pas ici de la situation du passage d'une variable chaîne ou d'une variable numérique. Pour ceux-là, il suffit de lire la documentation officielle ici. Je propose qu'entre composants Un écueil rencontré lors du passage d'objets.

Lorsqu'un objet est passé entre composants, puisque le type de référence de cet objet pointe vers une adresse, si une certaine valeur d'attribut de l'objet est modifiée dans le composant enfant, l'attribut correspondant de l'objet dans le composant parent Le composant changera également en conséquence. Si une telle liaison bidirectionnelle est nécessaire, alors c'est également une bonne méthode. Cependant, si une telle liaison bidirectionnelle n'est pas nécessaire, alors un nouvel objet doit être défini pour copier les propriétés et. valeurs ​​​​de l'objet d'origine. Le piège est ici. Si vous utilisez un objet var ou let ordinaire, par exemple :

computed: { 
  data: function () { 
   let obj={}; 
   obj=this.message//this.message是父组件传递的对象 
   return obj 
 } 
 },

et liez respectivement chaque attribut des données à la zone de saisie, et essayez de le modifier, vous constaterez que dans le composant parent, la valeur de l'attribut correspondant changera toujours et l'effet de liaison unidirectionnelle n'est pas obtenu. À ce stade, une méthode doit être ajoutée

computed: { 
 data: function () { 
  let obj=Object.assign({}, this.message); 
  return obj 
 } 
 },

<.>Les données renvoyées de cette manière sont un nouvel objet et ne pointeront pas vers l'adresse d'origine de l'objet, donc la modifier n'affectera pas l'objet dans le composant parent.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Analyse sur le concept et l'utilisation des fonctions anonymes JS et des fonctions anonymes auto-exécutables

Résoudre le problème lorsque installation en tant qu'administrateur npm Problèmes d'autorisation

Connaissances de base et principes de fonctionnement de vue-router

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!