Vue組件傳值

vue組件傳值

一、父組件向子組件傳值方式:

1. 子組件中定義props,父組件向子組件props進行傳值。

props傳值

2. 子組件中使用this.$parent.value?獲取父組件的值。

this.$parent.value?

二、子組件向父組件傳值方式

1. 事件傳遞:子組件定義this.$emit(‘transfer’,value),父組件通過<Son @transfer="getSonInfo" ></Son>,然后getSonInfo(msg)獲取信息。

事件傳遞?

2. 事件監(jiān)聽:子組件定義this.$emit(‘func’,value),子組件使用ref標記位置<Son ref="son"></Son>,父組件通過this.$refs['son'].$on('func',(msg)=>msg)獲取。

事件監(jiān)聽

3. 直接通過children獲?。涸诟附M件中通過this.$children[1].value獲取。

直接通過children獲取

三、非相關組件傳值

1. 使用vue bus:新建vue?bus,入口bus.$emit("msg",?"i?am?from?app");?獲取方bus.$on('msg',val?=>?{this.childMsg?=?val});

export vue bus
bus?傳值

2. 使用消息發(fā)布與訂閱:發(fā)送消息 pubsub.publishSync("sendMsg","這是A組件發(fā)布的消息!");

pubsub.subscribe("sendMsg",(e,msg)=>{console.log(e,msg);//sendMsg 這是A組件發(fā)布的消息!})

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

本文github地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • vue組件傳值在日常開發(fā)中比較常見,在官方文檔里面也有介紹,但是對于新手理解起來會有一點生澀。所以今天就把這個拉出...
    陳寶玉啊閱讀 31,647評論 6 27
  • Vue的組件化給前端開發(fā)帶來極大的便利,這種依賴數據來控制Dom的模式,區(qū)別于以前的開發(fā)控制Dom的開發(fā)理念,這也...
    Max_Law閱讀 1,191評論 0 3
  • 幾種vue的組件傳值方式 1、路由傳參 ①定義路由時加上參數props: true,在定義路由路徑時要留有參數占位...
    RAINBOW8300閱讀 22,815評論 4 6
  • https://blog.csdn.net/qq_41696819/article/details/8143140...
    情話_2ee5閱讀 401評論 0 1
  • 一、父子組件傳值 基本概念在Vue中,父子組件間的數據流向可以總結為prop向下傳遞,事件向上傳遞,即父組件通過p...
    北風吹_yfy閱讀 3,144評論 0 5

友情鏈接更多精彩內容