vueコンポーネント通信親伝子伝親兄弟伝値

vueコンポーネント通信
1.概念:コンポーネント内のデータなどのいくつかの値を他のコンポーネントに伝達し、ページ間でデータを共有することができる.カテゴリ:コンポーネント通信は、親伝子、子伝父、兄弟伝値、およびvuexによるコンポーネント伝値に分けられます.

親伝子:コンポーネント関係は親子関係であり、子コンポーネントは親コンポーネントで親コンポーネントを使用して動的バインド属性値を介して

を渡すことができる.

<Header :protype1="obj">
      <!--                  :protype   -->      
      <!-- obj             -->    
</Header>

サブコンポーネントはpropsで受信する必要がありますpropsは配列形式でもオブジェクト形式でも配列形式でも文字列で受信できるデータは直接使用できますが、変更はできません

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

サブコンポーネントはまた、伝達されたデータをオブジェクト形式で受信することもでき、すべてのpropは、その親子propの間に一方向の下りバインドを形成する.親propの更新はサブコンポーネントに下向きに流れるが、逆にはだめである.これにより、サブコンポーネントから親コンポーネントの状態が予期せぬ変化を防止し、アプリケーションのデータの流れが乱れます.propのデータを変更する必要がある場合は、$emitでイベントを配布し、親コンポーネントに変更することができます.配列で受け入れる場合は、prop検証を開いたりデフォルト値を設定したりすることはできません.props検証を開いたりデフォルト値を設定したりするには、オブジェクトでデータを受け入れる必要があります.形式は次のとおりです.

props:{
         
suibian:Array,    
title:String,    
age:{
     type:Number,           
     default:18//                                          
    }  }

propが検証できるデータ型:-string - Number - Boolean - Array - Object - Date - Function - Symbol

子伝父

親でメソッドを定義し、親コンポーネントのサブコンポーネントラベルでイベントを定義して呼び出す必要があります.

<Footer :name="arr" @backFn="toggle1"></Footer>
methods:{
           
toggle1(res){
             
console.log("        ",res)        
this.ActiveIndex = res      
             }    
         },

サブコンポーネントのメソッドでthis.$Emit()は、親コンポーネント内のカスタムイベントをトリガーします.パラメータが2番目のパラメータから渡されると、最初のパラメータは常にカスタムイベント名になります.

methods:{
         
toggle(index){
     
        this.$emit("backFn",index)
        this.isShow = index    
             } 
        },

兄弟伝値

新しい空のvueインスタンスがバスを担当し、データを渡す側がBusを通過する必要があります.e m i t()はイベントを配信する、データを受け取る側ではB u sを通過する.Emit()はイベントを配布し、データを受け取る側でBus.Emit()はイベントを配布し、データを受け取る側でBus.on()はイベントを傍受し,データはコールバック関数のパラメータとして伝達するBus.jsはデータをエクスポートする必要があります

import Vue from "vue"
export default new Vue()

データを渡す必要がある側はBus.$Emit()が伝達する最初のパラメータは伝達方法名であり,2番目のパラメータは過去のデータを伝達する必要がある

 add(){
             
       Bus.$emit("myFn",this.text)        
       console.log(this.text)    
      }

データを受信する必要がある側はBus.$on()受信送信を行うデータの1番目のパラメータは,送信側のメソッド名と同じであり,2番目のパラメータは受信したデータである.

mounted() {
         
        Bus.$on("myFn",(res)=>{
             
        console.log(res)        
        this.message = res    
       })  
},

vuexコンポーネント通信

stateはvuexのデータを行で格納し、vuexの5つのコアの1つであり、コンポーネントのdataと同様にデータを格納する場所であり、メソッドを定義する際にstateをパラメータとして渡すことができ、stateのデータを操作するvuexの5つのコア操作プロセスはコンポーネントの中でdispatchを通じてactionsのメソッドを呼び出すことができる.Actionでcommitを使用してmutationのメソッドを呼び出すと、mutationでstateのデータを直接操作でき、stateのデータが変更されるとすぐにコンポーネントに応答します.複数のコンポーネントをcommitでstateで定義されたデータを共有できます.