vueの親子コンポーネント、親子コンポーネントの値伝達、vuex

vueの親子コンポーネント、親子コンポーネントの値伝達、vuex
一、vueの親子コンポーネント間でどのように値を伝えますか?
ue双方向バインドがある以上,なぜ親子コンポーネント間の伝達値の問題があるのか.この問題も簡単で、vueのコンポーネントは他のvueページに呼び出され、配列が双方向にバインドされていると混乱しやすくなります.例えば、a、bページにnum=10がバインドされています.b、cページにnum=5がバインドされています.vueインスタンスのnumはいったい誰の話を聞いていますか.だから、これがvueの公式サイトです.
二、コンポーネント間のデータは単一の流通のみであり、親コンポーネントから子コンポーネントに伝達される.
はい、これからはあまり話さないでください.親子コンポーネントはどのように値を伝えていますか.そして、誰が親で、誰が子ですか.例1:コンポーネントをcomponentフォルダの下に置いてsonと呼ぶ.vueよし(ちょっとドラマチックなネーミング...)

<template>
  <div>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">   son num：{{num}}</p>
  </div>
</template>
<script>
export default {
  //props:["num"],//           ，      
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6      add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

このson.vueのコンポーネントはみんなが理解できると信じてnumのコンポーネントを加減します.次にindexを書きます.vue呼び出しson.vue

//index.vue
<template>
  <div>
    <son v-bind:num="num"></son>//      son.vue，      son.vue props        
    <p class="text-link">   index num：{{num}}</p>
  </div>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

このとき2つのnumはいずれも10です.再び加減ボタンをクリックすると、「sonのnum」はずっと変化しており、「indexの>num」はずっと10であり、これがデータの単項流通であることがわかります.では、ボタンをクリックして「indexのnum」を変えるにはどうすればいいのでしょうか.この时:时、$emitが必要です.
indexでvueでコードを変更するには、まず:

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"           

さらに

増加

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

そしてson.vueでmethodsが

methods:{
   add(){
       this.$emit("add");//$emit("add")         add  
   },
   minu(){
       this.$emit("minu");
   }
}

したがって、$emit(「xxx」)は親コンポーネントの関数をトリガーし、親コンポーネントのdataのnum値を変更し、親コンポーネントはpropsを介して子コンポーネントに値を渡す.これにより、データ転送、親子コンポーネント通信が実現されます.これはsonです.vueとindex.vueの完全なコード

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

//index.vue
<template>
 <div>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link"> {{num}}</p>
</div>
</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はこれをやっているので、グローバル変数の意味があります.どんなコンポーネントも持って、物を変えて、彼を探すことができます.

まずstateは倉庫と同じ唯一のデータキャリアです.

でmutationsはstateの値を変更できる唯一の東であり、commitなどを使用する.この2つはvuexの最も基礎が欠けている.簡単なvuex管理はこの2つを使用すればいいですが、vuexはどのように使用しますか?ここを見てhttps://segmentfault.com/a/11…

gettersの公式説明:新しい状態が派生し、これは理解しにくい.簡単に言えば、フィルタリング、組み合わせです!例えばstateには配列が保存されていて、配列には多くのデータがありますが、status:0のものだけを使ってgettersを使うことができます.ちょっとフィルターの意味があるのではないでしょうか.だからgettersは時々使いやすくて、必要です!の

actionsはmutationsをコミットするために使用されますが、なぜactionsでstate値を直接変更しないのですか?実際には、redux、mobxなどの管理ツールがほとんどです.Actionsは修正された動作を定義し,データ要求を行い,commitにより対応するmutationsをトリガする.重要な属性であり、解結合の思想にも合致している.

modulesも補助方法です.例えばmodulesaには完全なstate、actions、getters、mutationsがあります.modulesBには、storeをモジュールに分割し、混同を避ける完全なstate、actions、getters、mutationsもあります.