vue組件傳值
一、父組件向子組件傳值方式:
1. 子組件中定義props,父組件向子組件props進行傳值。
2. 子組件中使用this.$parent.value 獲取父組件的值。
二、子組件向父組件傳值方式
1. 事件傳遞:子組件定義this.$emit(‘transfer’,value),父組件通過<Son @transfer="getSonInfo" ></Son>,然後getSonInfo(msg)獲取信息。
2. 事件監聽:子組件定義this.$emit(‘func’,value),子組件使用ref標記位置<Son ref="son"></Son>,父組件通過this.$refs['son'].$on('func',(msg)=>msg)獲取。
3. 直接通過children獲取:在父組件中通過this.$children[1].value獲取。
三、非相關組件傳值
1. 使用vue bus:新建vue bus,入口bus.$emit("msg", "i am from app"); 獲取方bus.$on('msg',val => {this.childMsg = val});
2. 使用消息發佈與訂閱:發送消息 pubsub.publishSync("sendMsg","這是A組件發佈的消息!");
pubsub.subscribe("sendMsg",(e,msg)=>{console.log(e,msg);//sendMsg 這是A組件發佈的消息!})