Composants parent-enfant de Vue, transfert de valeur des composants parent-enfant et brève analyse de vuex

Cet article présente principalement les composants parent-enfant de Vue, une brève analyse du transfert de valeur des composants parent-enfant et de vuex. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. 🎜>

1. Comment transférer des valeurs entre les composants parents et enfants de Vue ? Tout d'abord, ce qu'il faut dire, c'est que puisque vue a une liaison bidirectionnelle, pourquoi y a-t-il un problème de transfert de valeur entre les composants parent et enfant ? Ce problème est également simple. Les composants Vue seront appelés par d'autres pages Vue. Si les tableaux sont liés dans les deux sens, il sera facile de se tromper. Par exemple, les pages a et b sont liées à un num=10. les pages b et c sont liées l'une à l'autre. Si num=5 est à égalité, qui le num de l'instance de vue écoute-t-il ? C'est pourquoi le site officiel de Vue indique que les données entre les composants

ne peuvent circuler que dans un seul élément, et qu'elles sont transmises du composant parent au composant enfant D'accord, pas grand chose à dire ensuite, comment les composants parent-enfant transfèrent-ils les valeurs, et qui est le parent et qui est l'enfant ?
Exemple 1 : écrivez d'abord un composant et placez-le dans le dossier du composant appelé son.vue (le nom est un peu spoiler...)

<template>
  <p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是son的num：{{num}}</p>
  </p>
</template>
<script>
export default {
  //props:["num"],//接收父组件传递过来的值，这里我先写上
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6的语法相当于add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

Je crois que tout le monde connaît ce composant son.vue Vous pouvez comprendre, ajouter et soustraire les composantes de num. Ensuite, écrivez un index.vue pour appeler son.vue

//index.vue
<template>
  <p>
    <son v-bind:num="num"></son>//传递一个值给son.vue，这时候可以把son.vue的props那个注释注销掉了
    <p class="text-link">这里是index的num：{{num}}</p>
  </p>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

À ce moment, les deux nombres sont 10. Cliquez à nouveau sur le bouton Ajouter et soustraire, et nous constaterons que le « numéro de fils » ne cesse de changer, tandis que le « numéro d'index » est toujours 10. Il s'agit de la circulation des données à un seul élément. Alors, comment pouvons-nous cliquer sur le bouton et modifier le « numéro d'index » ? À ce stade, $emit doit fonctionner.

Il faut changer le code dans index.vue

D'abord :

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是绑定一个自定义事件

Ajouter

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

puis dans son.vue, les méthodes deviennent

methods:{
   add(){
       this.$emit("add");//$emit("add")就是触发父组件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

Donc,

$emit("xxx") déclenche la fonction du composant parent, modifie la valeur numérique des données du composant parent et le composant parent transmet la valeur au composant enfant à travers des accessoires. Cela permet le transfert de données et la communication des composants parent-enfant . Voici le code complet de son.vue et index.vue

//son.vue
<template>
<p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是{{num}}</p>
</p>
</template>
<script>
export default {
  props:["num"],
  data () {
    return {
        num:10
    }
  },
   methods:{
       add(){
           this.$emit("add");
       },
       minu(){
           this.$emit("minu");
       }
   }
}
</script>

//index.vue
<template>
 <p>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{{num}}</p>
</p>
</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

2 Parlons de vuex et de son état, ses actions, ses getters, ses mutations, ses modules, son magasin. Tout d’abord, le site officiel de vuex indique qu’il s’agit d’un outil de gestion d’état de vue. L'état est peut-être difficile à comprendre. Vous pouvez simplement comprendre l'état comme une variable dans les données de vue. Lorsque la relation des variables de données entre les composants devient plus compliquée, les variables sont extraites et gérées. Vous pouvez simplement jeter un œil à ce qui précède pour voir si la communication entre num entre les composants parent et enfant est plus gênante. Vous devez toujours utiliser $emit pour modifier les données. Ce serait génial s'il y avait un endroit qui stockait la valeur de num comme un entrepôt, et celui qui voulait l'utiliser pouvait demander la valeur de num, et celui qui voulait la changer pouvait la changer, n'est-ce pas ? c'est un peu comme une variable globale. Si vous avez besoin d'obtenir des composants ou de modifier quelque chose, vous pouvez vous adresser à lui.

1. Tout d'abord, l'État est le seul support de données, au même titre que l'entrepôt.

2. Les mutations sont les seules choses qui peuvent changer la valeur de l'état, utiliser la validation, etc.
Ces deux sont les plus basiques et indispensables pour vuex. Pour une gestion simple de Vuex, utilisez simplement ces deux-là. Comment utiliser vuex ? Regardez ici https://segmentfault.com/a/11...
3. La description officielle des getters : dériver un nouvel état, c'est difficile à comprendre. Pour faire simple, c'est
filtrage et combinaison ! Par exemple, s'il y a un tableau stocké dans l'état, le tableau contient de nombreuses données, et je souhaite utiliser uniquement celles avec le statut : 0, je peux utiliser des getters. Cela ne signifie-t-il pas un peu de filtrage ? Les getters sont donc parfois utiles et nécessaires ! .
4. Les actions sont utilisées pour soumettre des mutations, wtf ? Pourquoi cela semble-t-il si redondant ! En fait non, la chose la plus importante à propos de ces actions est qu'elles peuvent inclure des opérations asynchrones. Je ne montrerai pas comment fonctionner de manière asynchrone, car vous ne l'utiliserez peut-être pas dans de nombreuses situations.
5. Les modules sont également des méthodes auxiliaires. Par exemple, modulesA a un état complet, des actions, des getters et des mutations ; modulesB peut également avoir un état complet, des actions, des getters et des mutations. Il divise le magasin en modules pour éviter toute confusion.

D'accord, c'est tout pour aujourd'hui. Vous devez encore lire davantage de documents officiels sur le site Web et vous entraîner davantage. Je vous demande à tous de me guider ! Apprendre est vraiment difficile, merci de me guider...

Enfin, si l'article vous est utile, merci de me donner une étoile pour m'encourager, je n'ai pas encore travaillé. . . Woohoo

</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

二、说说vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官网上说是一个vue的状态管理工具。可能状态比较难理解，大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候，就把其中的变量抽离出来管理。刚好大家可以看看上面，父子组件之间的num之间的通信是不是比较麻烦，改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值，谁要用谁去请求num的值，谁想改就改该多好是吧，vuex就是干这个的，有点全局变量的意思。任何组件需要拿，改东西，都可以找他。

1、首先state是惟一的数据载体，跟仓库一样。
2、而mutations是唯一可以改变state的值的东东，使用commit等。
这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行，如何使用vuex？看这里https://segmentfault.com/a/11...
3、getters的官方说明：派生出新的状态，这个比较难理解。简单来说，就是过滤，组合！
比如说state里面存了一个数组，数组有好多个数据，而我只想要用status：0的那些个，就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用，很必要！。
4、actions是用来提交mutations，wtf？怎么感觉那么多余！其实不是的，这个actions最重要的是可以包含异步操作。如何异步操作就不演示了，因为大家可能很多情况都不会使用它。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations；modulesB也可以有一个完整的state、actions、getters、mutations，他就是将store分割成模块，避免混淆。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

浏览器与NodeJS的EventLoop异同以及部分机制

利用javascript判断浏览器类型  

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!