Comment transmettre une valeur au composant vue
- 百草original
- 2023-07-18 09:27:46942parcourir
Les composants Vue transmettent la valeur des manières suivantes : 1. Transmettent la valeur avec le point d'interrogation, le deux-points et le composant parent-enfant ; . Utilisez "$ref" pour transmettre la valeur ; 6. Utilisez "inject" pour injecter les données du composant parent dans l'instance actuelle ; 7. Passez de l'ancêtre au petit-enfant 8. Passez du petit-fils à l'ancêtre ; 10. Transmettez la valeur à sessionStorage ; 11. vuex.
1. Transmettez le composant parent au composant enfant
Définissez un props dans le composant enfant, c'est-à-dire props :['msg'], msg peut être un objet ou un type de données de base
Si vous souhaitez définir une valeur par défaut, c'est-à-dire props : {msg : {type : String, default : 'hello world'}},
Si la valeur par défaut est un type d'objet : props : { msg : { type : Object , par défaut : () => { return { name: 'dan_seek' } } }}
Il est à noter que ce transfert de valeur est à sens unique, vous ne pouvez pas modifier la valeur du composant parent (sauf pour les types référence de bien sûr) ; et si vous modifiez directement la valeur des props, un warn.
La méthode d'écriture recommandée est de redéfinir une variable dans data() (voir Children.vue) et de lui attribuer des accessoires. Bien entendu, les propriétés calculées sont également acceptables.
Children.vue
<template>
<section>
父组件传过来的消息是：{{myMsg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
props:['msg'],
data() {
return {
myMsg:this.msg
}
},
methods: {}
}
</script>Parent.vue
<template>
<div class="parent">
<Children :msg="message"></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children
},
data() {
return {
message:'hello world'
}
},
}
</script>2. Passez le composant enfant au composant parent
Vous devez utiliser un événement personnalisé ici, utilisez this.$emit('myEvent') pour le déclencher dans le composant enfant, puis dans le composant parent Utilisez la surveillance @myEvent dans le composant
Children.vue
<template>
<section>
<br>
<div @click="clickme">click me</div>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
childNum:0
}
},
methods: {
clickme(){
// 通过自定义事件addNum把值传给父组件
this.$emit('addNum',this.childNum++)
}
}
}
</script>Parent.vue
<template>
<div class="parent">
这里是计数：{{parentNum}}
<Children-Com @addNum="getNum"></Children-Com>
</div>
</template>
<script>
import ChildrenCom from '../components/Children'
export default {
name: 'Parent',
components: {
ChildrenCom
},
data() {
return {
parentNum: 0
}
},
methods:{
// childNum是由子组件传入的
getNum(childNum){
this.parentNum = childNum
}
}
}
</script>3 Transmettez les valeurs entre les composants frères
Utilisez les capacités de déclenchement et de surveillance de l'événement personnalisé. émettre pour définir un bus d'événements public eventBus, à travers lequel En tant que pont intermédiaire, nous pouvons transmettre des valeurs à n'importe quel composant. Et grâce à l'utilisation d'eventBus, vous pouvez approfondir votre compréhension d'emit.
EventBus.js
import Vue from 'vue'export default new Vue()
Children1.vue
<template> <section> <div @click="pushMsg">push message</div> <br> </section></template><script> import eventBus from './EventBus' export default { name: "Children1", components: {}, data() { return { childNum:0 } }, methods: { pushMsg(){ // 通过事件总线发送消息 eventBus.$emit('pushMsg',this.childNum++) } } }</script>Children2.vue
<template>
<section>
children1传过来的消息：{{msg}}
</section>
</template>
<script>
import eventBus from './EventBus'
export default {
name: "Children2",
components: {},
data() {
return {
msg: ''
}
},
mounted() {
// 通过事件总线监听消息
eventBus.$on('pushMsg', (children1Msg) => {
this.msg = children1Msg
})
}
}
</script>Parent.vue
<template>
<div class="parent">
<Children1></Children1>
<Children2></Children2>
</div>
</template>
<script>
import Children1 from '../components/Children1'
import Children2 from '../components/Children2'
export default {
name: 'Parent',
components: {
Children1,
Children2
},
data() {
return {
}
},
methods:{
}
}
</script>Il existe également une bibliothèque open source vue-bus sur github, vous pouvez vous y référer : https://github.com/yangmingshan/vue -bus#readme
4. Transmettez les valeurs entre les routes
i. Utilisez des points d'interrogation pour transmettre des valeurs
Lorsque la page A passe à la page B, utilisez this.$router.push('/B?name=danseek' )
La page B peut utiliser ceci $route.query.name pour obtenir la valeur transmise à partir de la page A
Veuillez noter la différence entre le routeur et la route ci-dessus
ii. Utilisez deux points pour transmettre la valeur
Configurez la route suivante :
{
path: '/b/:name',
name: 'b',
component: () => import( '../views/B.vue')
},Sur la page B, vous pouvez transmettre this.$route .params.name pour obtenir la valeur du nom transmis par la route
iii Utilisez le composant parent-enfant pour transmettre la valeur
Depuis le routeur-. La vue elle-même est également un composant, nous pouvons également utiliser le composant parent-enfant pour transmettre la valeur, puis ajouter des accessoires à la sous-page correspondante. Parce que l'itinéraire n'est pas actualisé après la mise à jour du type, vous ne pouvez pas obtenir directement la dernière. tapez la valeur dans le hook monté de la sous-page, vous devez plutôt utiliser watch.
<router-view :type="type"></router-view>
// 子页面
......
props: ['type']
......
watch: {
type(){
// console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
},
},5. Utilisez $ref pour transmettre la valeur
Utilisez la capacité de $ref pour définir un identifiant pour le composant enfant. Le composant parent peut accéder directement aux méthodes et propriétés du composant enfant via cet ID
Définissez d'abord. un composant enfant Children. vue
<template>
<section>
传过来的消息：{{msg}}
</section>
</template>
<script>
export default {
name: "Children",
components: {},
data() {
return {
msg: '',
desc:'The use of ref'
}
},
methods:{
// 父组件可以调用这个方法传入msg
updateMsg(msg){
this.msg = msg
}
},
}
</script>Puis référencez Children.vue dans le composant parent Parent.vue et définissez l'attribut ref
<template>
<div class="parent">
<!-- 给子组件设置一个ID ref="children" -->
<Children ref="children"></Children>
<div @click="pushMsg">push message</div>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'parent',
components: {
Children,
},
methods:{
pushMsg(){
// 通过这个ID可以访问子组件的方法
this.$refs.children.updateMsg('Have you received the clothes？')
// 也可以访问子组件的属性
console.log('children props:',this.$refs.children.desc)
}
},
}
</script>6. Utilisez l'injection de dépendances pour le transmettre aux descendants et arrière-petits-enfants
Supposons que le composant parent ait. une méthode getName(), qui doit être fournie à tous les descendants
provide: function () {
return {
getName: this.getName()
}
}L'option provide nous permet de spécifier les données/méthodes que nous voulons fournir aux composants descendants
Ensuite, dans n'importe quel composant descendant, nous pouvons utiliser inject pour injecter le données/méthodes du composant parent dans l'instance actuelle :
inject: ['getName']
Parent.vue
<template>
<div class="parent">
<Children></Children>
</div>
</template>
<script>
import Children from '../components/Children'
export default {
name: 'Parent',
components: {
Children,
},
data() {
return {
name:'dan_seek'
}
},
provide: function () {
return {
getName: this.name
}
},
}
</script>Children.vue
父组件传入的值：{{getName}}
<script>
export default {
name: "Children",
components: {},
data() {
return {
}
},
inject: [&#39;getName&#39;],
}
</script>7 Petit-fils ancestral $attrs
Normalement, vous devez utiliser les accessoires du père comme transition intermédiaire, mais. De cette façon, le composant père aura plus de choses qui n'ont rien à voir avec l'activité du composant parent. Les attributs, à couplage élevé, peuvent être simplifiés à l'aide de $attrs, et ni l'ancêtre ni le petit-enfant n'ont besoin d'apporter de modifications
GrandParent. vue
<template>
<section>
<parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
</section>
</template>
<script>
import Parent from './Parent'
export default {
name: "GrandParent",
components: {
Parent
},
data() {
return {}
},
methods: {
sayKnow(val){
console.log(val)
}
},
mounted() {
}
}
</script>Parent.vue
<template>
<section>
<p>父组件收到</p>
<p>祖父的名字：{{name}}</p>
<children v-bind="$attrs" v-on="$listeners"></children>
</section>
</template>
<script>
import Children from './Children'
export default {
name: "Parent",
components: {
Children
},
// 父组件接收了name,所以name值是不会传到子组件的
props:['name'],
data() {
return {}
},
methods: {},
mounted() {
}
}
</script>Children.vue
<template>
<section>
<p>子组件收到</p>
<p>祖父的名字：{{name}}</p>
<p>祖父的性别：{{sex}}</p>
<p>祖父的年龄：{{age}}</p>
<p>祖父的爱好：{{hobby}}</p>
<button @click="sayKnow">我知道啦</button>
</section>
</template>
<script>
export default {
name: "Children",
components: {},
// 由于父组件已经接收了name属性，所以name不会传到子组件了
props:['sex','age','hobby','name'],
data() {
return {}
},
methods: {
sayKnow(){
this.$emit('sayKnow','我知道啦')
}
},
mounted() {
}
}
</script>Afficher les résultats
Composant parent reçu
Nom du grand-père : grandParent
Sous-composant reçu
Nom du grand-père :
Grand-père' Sexe : Homme
Âge du grand-père : 88
Le passe-temps du grand-père : code
8, l'ancêtre du petit-fils
Avec l'aide de $listeners middle Events, le petit-fils peut facilement informer l'ancêtre. Pour des exemples de code, voir 7
9, $parent
Vous pouvez obtenir le parent. instance du composant via le parent, puis vous pouvez accéder aux propriétés et aux méthodes du composant parent via cette instance. Il a également une racine frère. Vous pouvez obtenir l'instance du composant racine.
Syntaxe :
// 获父组件的数据 this.$parent.foo // 写入父组件的数据 this.$parent.foo = 2 // 访问父组件的计算属性 this.$parent.bar // 调用父组件的方法 this.$parent.baz()
Ainsi, dans l'exemple de transmission d'un composant enfant à un composant parent, vous pouvez utiliser this.$parent.getNum(100) pour transmettre la valeur au composant parent.
10. Transfert de valeur SessionStorage
sessionStorage est un objet global du navigateur, et les données qui y sont stockées seront effacées à la fermeture de la page. Grâce à cette fonctionnalité, nous pouvons partager une copie des données sur toutes les pages.
Syntaxe :
// 保存数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 let data = sessionStorage.getItem('key'); // 从 sessionStorage 删除保存的数据 sessionStorage.removeItem('key'); // 从 sessionStorage 删除所有保存的数据 sessionStorage.clear();
Remarque : Il stocke les paires clé-valeur, qui ne peuvent être que de type chaîne. Si vous souhaitez stocker des objets, vous devez utiliser let objStr = JSON.stringify(obj) pour les convertir en chaînes et. puis stockez-les (à utiliser lorsque let obj = JSON.parse(objStr) analyser dans un objet).
Est-ce gênant de stocker des objets comme celui-ci ? Je recommande une bibliothèque good-storage, qui encapsule sessionStorage, et vous pouvez directement utiliser son API pour stocker des objets
// localStorage storage.set(key,val) storage.get(key, def) // sessionStorage storage.session.set(key, val) storage.session.get(key, val)
11, vuex
Je ne vais pas vous présenter ici comment utiliser cette fameuse vuex, car ce serait trop long de l'écrire clairement...
Si vous n'envisagez pas de développer une grosse application monopage, utiliser Vuex peut être encombrant et redondant. C'est vrai : si votre application est assez simple, vous n'avez probablement pas besoin d'utiliser Vuex.
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!
Articles Liés
Voir plus- Quelles sont les méthodes de transfert de données pour la communication des composants Vue ?
- Meilleures pratiques pour la communication des composants Vue
- Quelles sont les méthodes d'implémentation de la communication des composants Vue ?
- Problèmes courants et solutions pour la communication des composants Vue