Vue組件傳值 vue組件傳值

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組件發佈的消息!})

Vue組件傳參的五種方式參考

本文github地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章