Dans les documents VueJs 2.0, je ne trouve aucun crochet qui écouterait les props
changements.
Est-ce que VueJs a des crochets similaires onPropsUpdated()
ou similaires?
Mettre à jour
Comme l'a suggéré @wostex, j'ai essayé watch
ma propriété mais rien n'a changé. Puis j'ai réalisé que j'avais un cas particulier:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
Je passe myProp
que le composant parent reçoit au child
composant. Alors le watch: {myProp: ...}
ne fonctionne pas.
javascript
vue.js
vuejs2
vue-component
Amio.io
la source
la source
Réponses:
Vous pouvez
watch
proposer d'exécuter du code lors des modifications d'accessoires:la source
watch
. Grâce à votre exemple, j'ai réalisé que mon cas était un peu différent. J'ai mis à jour ma question.Avez-vous essayé cela?
https://vuejs.org/v2/api/#watch
la source
Il,
dans mon cas, j'avais besoin d'une solution où chaque fois que les accessoires changeraient, je devais analyser à nouveau mes données. J'étais fatigué de faire un observateur séparé pour tous mes accessoires, alors j'ai utilisé ceci:
Le point clé à retenir de cet exemple est d'utiliser
deep: true
afin qu'il regarde non seulement $ props mais aussi ses valeurs imbriquées comme par exempleprops.myProp
Vous pouvez en savoir plus sur ces options de surveillance étendue ici: https://vuejs.org/v2/api/#vm-watch
la source
Vous devez comprendre, la hiérarchie des composants que vous avez et comment vous passez des accessoires, votre cas est certainement spécial et n'est généralement pas rencontré par les développeurs.
Si myProp est modifié dans le composant parent, il sera également reflété dans le composant enfant.
Et si myProp est modifié dans le composant enfant, il sera également reflété dans le composant petit-enfant.
Donc, si myProp est modifié dans le composant parent, il sera reflété dans le composant petit-enfant. (jusqu'ici tout va bien).
Par conséquent, dans la hiérarchie, vous n'avez rien à faire, les accessoires seront intrinsèquement réactifs.
Parlons maintenant de monter dans la hiérarchie
Si myProp est modifié dans le composant grandChild, il ne sera pas reflété dans le composant enfant. Vous devez utiliser le modificateur .sync dans l'enfant et émettre un événement à partir du composant grandChild.
Si myProp est modifié dans le composant enfant, il ne sera pas reflété dans le composant parent. Vous devez utiliser le modificateur .sync dans le parent et émettre un événement à partir du composant enfant.
Si myProp est modifié dans le composant grandChild, il ne sera pas reflété dans le composant parent (évidemment). Vous devez utiliser le modificateur .sync enfant et émettre un événement à partir du composant petit-enfant, puis regarder l'accessoire dans le composant enfant et émettre un événement lors de la modification qui est écouté par le composant parent à l'aide du modificateur .sync.
Voyons un peu de code pour éviter toute confusion
Parent.vue
Child.vue
Petitchild.vue
Mais après cela, vous n'aurez pas remarqué les avertissements hurlants de vue disant
Encore une fois, comme je l'ai mentionné plus tôt, la plupart des développeurs ne rencontrent pas ce problème, car c'est un anti pattern. C'est pourquoi vous obtenez cet avertissement.
Mais afin de résoudre votre problème (selon votre conception). Je crois que vous devez faire le travail ci-dessus (pirater pour être honnête). Je vous recommande tout de même de repenser votre conception et de la rendre moins sujette aux bugs.
J'espère que ça aide.
la source
Je ne sais pas si vous l'avez résolu (et si je comprends bien), mais voici mon idée:
Si le parent reçoit myProp, et que vous voulez qu'il passe à l'enfant et le regarde dans l'enfant, alors le parent doit avoir une copie de myProp (pas une référence).
Essaye ça:
et en html:
en fait, vous devez être très prudent lorsque vous travaillez sur des collections complexes dans de telles situations (en passant plusieurs fois)
la source
pour la liaison bidirectionnelle, vous devez utiliser le modificateur .sync
plus de détails...
et vous devez utiliser la propriété watch dans le composant enfant pour écouter et mettre à jour les modifications
la source
Je travaille avec une propriété calculée comme:
Les ressources sont dans ce cas une propriété:
la source
Pour moi, c'est une solution polie pour obtenir un changement spécifique d'accessoires et créer une logique avec
J'utiliserais
props
et lescomputed
propriétés des variables pour créer une logique après avoir reçu les modificationsDonc, nous pourrions utiliser _objectDetail sur le rendu html
ou dans une certaine méthode:
la source
Vous pouvez utiliser le mode montre pour détecter les changements:
Faites tout au niveau atomique. Vérifiez donc d'abord si la méthode de surveillance elle-même est appelée ou non en consolant quelque chose à l'intérieur. Une fois qu'il a été établi que la montre est appelée, écrasez-la avec votre logique métier.
la source
J'utilise
props
lescomputed
propriétés et les variables si j'ai besoin de créer une logique après pour recevoir les modificationsla source
si myProp est un objet, il ne peut pas être modifié normalement. ainsi, la montre ne sera jamais déclenchée. la raison pour laquelle myProp ne doit pas être modifiée est que vous venez de définir quelques clés de myProp dans la plupart des cas. le myProp lui-même est toujours celui-là. essayez de regarder les accessoires de myProp, comme "myProp.a", cela devrait fonctionner.
la source
La fonction de surveillance doit être placée dans le composant enfant. Pas parent.
la source
@JoeSchr a une bonne réponse. voici une autre façon de le faire si vous ne voulez pas «profond: vrai».
la source