Maison interface Web js tutoriel Explication détaillée des étapes de transmission des données via les accessoires

Explication détaillée des étapes de transmission des données via les accessoires

May 02, 2018 am 09:15 AM
props 步骤 详解

Cette fois, je vais vous donner une explication détaillée des étapes à suivre pour les accessoires pour transférer des données. Quelles sont les précautions pour les accessoires pour transférer des données. Voici un cas pratique, jetons un coup d'œil.

Dans Vue, la relation entre les composants parent et enfant peut être résumée lorsque les accessoires sont transmis vers le bas et les événements vers le haut. Le composant parent envoie des données au composant enfant via des accessoires, et le composant enfant envoie des messages au composant parent via des événements. Voyez comment ils fonctionnent.

1. Utilisation de base

Les composants ne servent pas seulement à réutiliser le contenu des modèles. l'important est la communication entre les composants.

Dans le composant, utilisez l'option props pour déclarer les données qui doivent être reçues du parent. La valeur des accessoires peut être de deux types, l'un est chaîne tableau et l'autre. est objet.

1.1 Tableau de chaînes :

  <p id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </p>
Vue.component('my-component4',{
 props: ['message'],
 template: '<p>{{message}}</p>'
});
var app4 = new Vue({
 el: '#app4'
});
Copier après la connexion

Le résultat après le rendu est :

<p id= ” app4”>
  <p >来自父组件的数据</ p>
</p>
Copier après la connexion

Données déclarées dans la fonction des accessoires et des données des composants Le principal La différence dans les données renvoyées est que les accessoires proviennent du parent, tandis que les données contenues dans les données sont les propres données du composant et que la portée est le composant lui-même. Ces deux données peuvent être dans le modèle et l'attribut calculé calculé et <.>méthode utilisée dans l'art.

Le message de données dans l'exemple ci-dessus est transmis depuis le parent via les accessoires. Écrivez le nom des accessoires directement sur la balise personnalisée du composant. Si vous souhaitez transmettre plusieurs données, ajoutez simplement des éléments dans les accessoires. tableau. .

Parfois, les données transmises ne sont pas directement codées en dur, mais des données dynamiques du parent. Dans ce cas, vous pouvez utiliser la commande v -bind pour lier dynamiquement la valeur des accessoires. Les modifications du composant parent seront également transmises aux composants enfants.

  <p id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </p>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<p>{{myText}}</p>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});
Copier après la connexion
Quelques points à noter :

1 Si vous souhaitez transmettre directement des nombres, des valeurs booléennes, des tableaux, des objets et que vous n'utilisez pas v-bind, vous transmettrez uniquement. cordes.

2. Si vous souhaitez transmettre toutes les propriétés d'un objet comme accessoires, vous pouvez utiliser v-bind sans aucun paramètre (c'est-à-dire utiliser v-bind au lieu de v -bind:prop-name). Par exemple, un objet à faire connu :

1.2 Objet :

Lorsque l'accessoire doit être vérifié, l'écriture de l'objet est requise.

Généralement, lorsque votre composant doit être fourni à d'autres, il est recommandé d'effectuer une vérification des données. Par exemple, certaines données doivent être de type numérique si une chaîne est transmise, un avertissement apparaîtra. sur la console.

 <p id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </p>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必须是数字类型的
   required: true, //必须传值
   default: 1 //如果未定义,默认值就是1
  }
 },
 template: '<p>{{myText}}</p>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});
Copier après la connexion
Le type de type vérifié peut être :

• String

• Number
• Boolean
• Object
• Array
• Function

type peut également être un constructeur personnalisé, détecté à l'aide de instanceof.

Lorsque la vérification des accessoires échoue, un avertissement sera émis dans la console dans la version de développement.

2. Flux de données unidirectionnel

L'un des changements les plus importants entre Vue 2.x et Vue l.x est que Vue2.x est transmis via les accessoires Les données sont à sens unique, c'est-à-dire que lorsque les données du composant parent changent, elles seront transmises au composant enfant, mais pas l'inverse.

Nous rencontrons souvent deux situations dans lesquelles prop doit être modifié en entreprise.

2.1 La première est que le composant parent transmet la valeur initiale et que le composant enfant l'enregistre comme valeur initiale et. le stocke dans son propre champ d'application. Il peut être utilisé et modifié à volonté dans le cadre du champ d'application. (Une fois Prop transmis comme valeur initiale, le composant enfant souhaite l'utiliser comme données locales ;)

Dans ce cas, vous pouvez déclarer une autre donnée dans les données du composant et référencer la prop du composant parent. . L'exemple de code est le suivant :

 <p id="app7">
   <my-component7 :init-count="1"></my-component7>
  </p>
Vue.component('my-component7',{
 props: ['initCount'],
 template: '<p>{{count}}</p>',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});
Copier après la connexion
Le nombre de données est déclaré dans le composant. Il obtiendra le initCount du composant parent lorsque le composant est initialisé. Après cela, cela n'a rien à voir avec. it. Il ne conserve que le compte. De cette façon, vous pouvez éviter d'utiliser directement le initCount .

2.2 prop est transmis comme valeur d'origine qui doit être transformée. (Prop est transmis sous forme de données brutes et est traité par le sous-composant dans d'autres sorties de données.)

Dans ce cas, les propriétés calculées suffisent. L'exemple de code est le suivant :

.

  <p id="app8">
   <my-component8 :width="100"></my-component8>
  </p>
Vue.component('my-component8',{
 props: ['width'],
 template: '<p :style="style">组件内容</p>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});
Copier après la connexion

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

webpack自动刷新使用详解

Angular入口组件与声明式组件使用详解

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment faire de Google Maps la carte par défaut sur iPhone Comment faire de Google Maps la carte par défaut sur iPhone Apr 17, 2024 pm 07:34 PM

La carte par défaut sur l'iPhone est Maps, le fournisseur de géolocalisation propriétaire d'Apple. Même si la carte s’améliore, elle ne fonctionne pas bien en dehors des États-Unis. Il n'a rien à offrir par rapport à Google Maps. Dans cet article, nous discutons des étapes réalisables pour utiliser Google Maps afin de devenir la carte par défaut sur votre iPhone. Comment faire de Google Maps la carte par défaut sur iPhone Définir Google Maps comme application cartographique par défaut sur votre téléphone est plus facile que vous ne le pensez. Suivez les étapes ci-dessous – Étapes préalables – Vous devez avoir Gmail installé sur votre téléphone. Étape 1 – Ouvrez l'AppStore. Étape 2 – Recherchez « Gmail ». Étape 3 – Cliquez à côté de l'application Gmail

Cet identifiant Apple n'est pas encore utilisé dans l'iTunes Store : correctif Cet identifiant Apple n'est pas encore utilisé dans l'iTunes Store : correctif Jun 10, 2024 pm 05:42 PM

Lors de la connexion à iTunesStore à l'aide de l'AppleID, cette erreur indiquant "Cet AppleID n'a pas été utilisé dans iTunesStore" peut s'afficher à l'écran. Il n'y a pas de messages d'erreur à craindre, vous pouvez les corriger en suivant ces ensembles de solutions. Correctif 1 – Modifier l'adresse de livraison La principale raison pour laquelle cette invite apparaît dans l'iTunes Store est que vous n'avez pas la bonne adresse dans votre profil AppleID. Étape 1 – Tout d’abord, ouvrez les paramètres iPhone sur votre iPhone. Étape 2 – AppleID doit être au-dessus de tous les autres paramètres. Alors, ouvrez-le. Étape 3 – Une fois sur place, ouvrez l’option « Paiement et expédition ». Étape 4 – Vérifiez votre accès à l'aide de Face ID. étape

Étapes pour mettre à niveau vers la dernière version de WeChat (maîtrisez facilement la méthode de mise à niveau vers la dernière version de WeChat) Étapes pour mettre à niveau vers la dernière version de WeChat (maîtrisez facilement la méthode de mise à niveau vers la dernière version de WeChat) Jun 01, 2024 pm 10:24 PM

WeChat est l'une des plateformes de médias sociaux en Chine qui lance continuellement de nouvelles versions pour offrir une meilleure expérience utilisateur. La mise à niveau de WeChat vers la dernière version est très importante pour rester en contact avec sa famille et ses collègues, rester en contact avec ses amis et se tenir au courant des derniers développements. 1. Comprendre les fonctionnalités et améliorations de la dernière version Il est très important de comprendre les fonctionnalités et améliorations de la dernière version avant de mettre à niveau WeChat. Pour améliorer les performances et corriger des bugs, vous pouvez en savoir plus sur les différentes nouvelles fonctionnalités apportées par la nouvelle version en consultant les notes de mise à jour sur le site officiel ou sur l'App Store de WeChat. 2. Vérifiez la version actuelle de WeChat Nous devons vérifier la version de WeChat actuellement installée sur le téléphone mobile avant de mettre à niveau WeChat. Cliquez pour ouvrir l'application WeChat « Moi », puis sélectionnez le menu « À propos » où vous pouvez voir le numéro de version actuel de WeChat. 3. Ouvrez l'application

Explication détaillée des étapes pour obtenir les autorisations d'administrateur système Win11 Explication détaillée des étapes pour obtenir les autorisations d'administrateur système Win11 Mar 08, 2024 pm 09:09 PM

Windows 11, en tant que dernier système d'exploitation lancé par Microsoft, est profondément apprécié des utilisateurs. Lors de l'utilisation de Windows 11, nous devons parfois obtenir les droits d'administrateur système afin d'effectuer certaines opérations nécessitant des autorisations. Ensuite, nous présenterons en détail les étapes pour obtenir les droits d'administrateur système dans Windows 11. La première étape consiste à cliquer sur "Menu Démarrer". Vous pouvez voir l'icône Windows dans le coin inférieur gauche. Cliquez sur l'icône pour ouvrir le "Menu Démarrer". Dans la deuxième étape, recherchez et cliquez sur "

Problème de zoom Safari sur iPhone : voici la solution Problème de zoom Safari sur iPhone : voici la solution Apr 20, 2024 am 08:08 AM

Si vous n'avez pas de contrôle sur le niveau de zoom dans Safari, faire avancer les choses peut être délicat. Donc, si Safari semble zoomé, cela pourrait être un problème pour vous. Voici quelques façons de résoudre ce problème mineur de zoom dans Safari. 1. Grossissement du curseur : sélectionnez « Affichage » > « Grossissement du curseur » dans la barre de menu Safari. Cela rendra le curseur plus visible sur l'écran, ce qui facilitera son contrôle. 2. Déplacez la souris : Cela peut paraître simple, mais parfois, le simple fait de déplacer la souris vers un autre emplacement de l'écran peut automatiquement la ramener à sa taille normale. 3. Utilisez les raccourcis clavier Fix 1 – Réinitialiser le niveau de zoom Vous pouvez contrôler le niveau de zoom directement depuis le navigateur Safari. Étape 1 – Lorsque vous êtes dans Safari

L'application Shazam ne fonctionne pas sur iPhone : correctif L'application Shazam ne fonctionne pas sur iPhone : correctif Jun 08, 2024 pm 12:36 PM

Vous rencontrez des problèmes avec l’application Shazam sur iPhone ? Shazam vous aide à trouver des chansons en les écoutant. Cependant, si Shazam ne fonctionne pas correctement ou ne reconnaît pas la chanson, vous devrez la dépanner manuellement. La réparation de l'application Shazam ne prendra pas longtemps. Alors, sans perdre plus de temps, suivez les étapes ci-dessous pour résoudre les problèmes avec l'application Shazam. Correctif 1 – Désactiver la fonctionnalité de texte en gras Le texte en gras sur iPhone peut être la raison pour laquelle Shazam ne fonctionne pas correctement. Étape 1 – Vous ne pouvez le faire qu’à partir des paramètres de votre iPhone. Alors, ouvrez-le. Étape 2 – Ensuite, ouvrez les paramètres « Affichage et luminosité ». Étape 3 – Si vous constatez que « Texte en gras » est activé

Les captures d'écran de l'iPhone ne fonctionnent pas : comment y remédier Les captures d'écran de l'iPhone ne fonctionnent pas : comment y remédier May 03, 2024 pm 09:16 PM

La fonction de capture d'écran ne fonctionne pas sur votre iPhone ? Prendre une capture d'écran est très simple car il vous suffit de maintenir enfoncés simultanément le bouton d'augmentation du volume et le bouton d'alimentation pour saisir l'écran de votre téléphone. Cependant, il existe d'autres moyens de capturer des images sur l'appareil. Correctif 1 – Utilisation d’Assistive Touch Prenez une capture d’écran à l’aide de la fonction Assistive Touch. Étape 1 – Accédez aux paramètres de votre téléphone. Étape 2 – Ensuite, appuyez pour ouvrir les paramètres d'accessibilité. Étape 3 – Ouvrez les paramètres Touch. Étape 4 – Ensuite, ouvrez les paramètres Assistive Touch. Étape 5 – Activez Assistive Touch sur votre téléphone. Étape 6 – Ouvrez « Personnaliser le menu supérieur » pour y accéder. Étape 7 – Il ne vous reste plus qu'à lier l'une de ces fonctions à votre capture d'écran. Alors cliquez sur le premier

Application d'horloge manquante sur iPhone : comment y remédier Application d'horloge manquante sur iPhone : comment y remédier May 03, 2024 pm 09:19 PM

L'application horloge est-elle absente de votre téléphone ? La date et l'heure apparaîtront toujours sur la barre d'état de votre iPhone. Cependant, sans l'application Horloge, vous ne pourrez pas utiliser l'horloge mondiale, le chronomètre, le réveil et bien d'autres fonctionnalités. Par conséquent, réparer l’application d’horloge manquante devrait figurer en haut de votre liste de tâches. Ces solutions peuvent vous aider à résoudre ce problème. Correctif 1 – Placer l’application Horloge Si vous avez supprimé par erreur l’application Horloge de votre écran d’accueil, vous pouvez remettre l’application Horloge à sa place. Étape 1 – Déverrouillez votre iPhone et commencez à faire glisser votre doigt vers la gauche jusqu'à atteindre la page Bibliothèque d'applications. Étape 2 – Ensuite, recherchez « horloge » dans le champ de recherche. Étape 3 – Lorsque vous voyez « Horloge » ci-dessous dans les résultats de recherche, maintenez-la enfoncée et

See all articles