Vues Eltern-Kind-Komponenten, Wertübertragung von Eltern-Kind-Komponenten und eine kurze Analyse von Vuex

Dieser Artikel stellt hauptsächlich die Eltern-Kind-Komponenten von Vue vor, eine kurze Analyse der Wertübertragung von Eltern-Kind-Komponenten. Jetzt kann ich ihn mit Ihnen teilen 🎜>

1. Wie übertrage ich Werte zwischen übergeordneten und untergeordneten Komponenten von Vue? Zunächst muss gesagt werden, dass Vue über eine bidirektionale Bindung verfügt. Warum gibt es dann ein Wertübertragungsproblem zwischen übergeordneten und untergeordneten Komponenten? Dieses Problem ist auch einfach. Wenn die Arrays in beide Richtungen gebunden sind, kann es leicht zu Verwechslungen kommen. Beispielsweise sind die Seiten a und b an eine Zahl = 10 gebunden Die Seiten b und c sind aneinander gebunden. Wenn num=5 gebunden ist, auf wen hört die num der Vue-Instanz? Aus diesem Grund heißt es auf der offiziellen Website von Vue, dass Daten zwischen

-Komponenten nur in einem einzigen Element zirkulieren können und von der übergeordneten Komponente an die untergeordnete Komponente weitergegeben werden. Als nächstes gibt es nicht viel zu sagen: Wie übertragen Eltern-Kind-Komponenten Werte und wer ist das Elternteil und wer das Kind? Beispiel 1: Schreiben Sie zuerst eine Komponente und legen Sie sie in den Komponentenordner mit dem Namen son.vue (die Benennung ist ein bisschen 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>

Ich glaube, jeder kann diese son.vue-Komponente verstehen , addiere und subtrahiere die Komponenten von num. Als nächstes schreiben Sie eine index.vue, um 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>

aufzurufen. Zu diesem Zeitpunkt sind beide Zahlen 10. Klicken Sie erneut auf die Schaltfläche „Addieren und Subtrahieren“, und wir werden feststellen, dass sich die „Anzahl der Söhne“ ständig ändert, während die „Anzahl der Indizes“ immer 10 beträgt. Dies ist die Zirkulation von Daten in einem einzelnen Element. Wie klicken wir also auf die Schaltfläche und ändern die „Indexzahl“? Zu diesem Zeitpunkt muss $emit funktionieren.

Wir müssen den Code in index.vue ändern

Zuerst:

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

und dann

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

hinzufügen und dann werden die Methoden in son.vue zu

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

Also löst

$emit("xxx") die Funktion der übergeordneten Komponente aus, ändert den Num-Wert der Daten der übergeordneten Komponente und die übergeordnete Komponente übergibt den Wert über Requisiten an die untergeordnete Komponente. Dies ermöglicht die Datenübertragung und die Kommunikation zwischen Eltern-Kind-Komponenten

.

Dies ist der vollständige Code von son.vue und 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. Sprechen wir über vuex und seinen Status, Aktionen, Getter, Mutationen, Module, Store

Erstens heißt es auf der offiziellen Vuex-Website, dass es sich um ein Vue-State-Management-Tool handelt. Möglicherweise ist der Zustand schwer zu verstehen. Sie können den Zustand einfach als Variable in den Daten von vue verstehen. Wenn die Datenvariablenbeziehung zwischen Komponenten komplizierter wird, werden die Variablen extrahiert und verwaltet. Sie können einfach einen Blick auf das Obige werfen, um zu sehen, ob die Kommunikation zwischen der übergeordneten und der untergeordneten Komponente problematischer ist. Sie müssen immer noch $emit verwenden, um die Daten zu ändern. Es wäre großartig, wenn es einen Ort gäbe, der den Wert von Num speichert, genau wie ein Lagerhaus, und jeder, der ihn verwenden möchte, könnte den Wert von Num anfordern, und jeder, der ihn ändern möchte, könnte ihn ändern, oder? Es ist ein bisschen wie eine globale Variable. Wenn Sie Komponenten besorgen oder etwas ändern müssen, können Sie zu ihm kommen. 1. Zunächst einmal ist der Staat der einzige Datenträger, genau wie das Lager.
2. Mutationen sind die einzigen Dinge, die den Wert von State, Use Commit usw. ändern können.

Diese beiden sind die grundlegendsten und unverzichtbarsten für Vuex. Für eine einfache Vuex-Verwaltung verwenden Sie einfach diese beiden. Wie verwende ich Vuex? Schauen Sie hier https://segmentfault.com/a/11...

3. Die offizielle Beschreibung von Gettern: Einen neuen Zustand ableiten, das ist schwer zu verstehen. Einfach ausgedrückt handelt es sich um
Filtern und Kombinieren!

Wenn beispielsweise ein Array im Status gespeichert ist, das Array viele Daten enthält und ich nur diejenigen mit dem Status: 0 verwenden möchte, kann ich Getter verwenden. Bedeutet das nicht ein bisschen Filtern? Getter sind also manchmal nützlich und notwendig! . 4. Aktionen werden verwendet, um Mutationen einzureichen, was? Warum fühlt es sich so überflüssig an? Nein, das Wichtigste an diesen Aktionen ist, dass sie asynchrone Vorgänge umfassen können. Ich werde nicht zeigen, wie man asynchron arbeitet, da Sie es in vielen Situationen möglicherweise nicht verwenden. 5. Module sind auch Hilfsmethoden. ModuleA verfügt beispielsweise über einen vollständigen Status, Aktionen, Getter und Mutationen; ModuleB kann auch einen vollständigen Status, Aktionen, Getter und Mutationen haben. Es unterteilt den Speicher in Module, um Verwirrung zu vermeiden.

Okay, das ist alles für heute. Sie müssen noch mehr offizielle Website-Dokumente lesen und mehr üben. Ich bitte Sie alle um Rat! Lernen ist wirklich schwierig, bitte leiten Sie mich ...

Wenn der Artikel für Sie hilfreich ist, geben Sie mir bitte einen Stern, um mich zu ermutigen, ich habe noch nicht gearbeitet. . . Juhuu

</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判断浏览器类型  

Das obige ist der detaillierte Inhalt vonVues Eltern-Kind-Komponenten, Wertübertragung von Eltern-Kind-Komponenten und eine kurze Analyse von Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!