亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

關(guān)于vue中組件傳值的一些問題

chnmagnus / 3154人閱讀

摘要：一父子組件之間的傳值父組件傳遞給子組件需要在子組件中通過接收值子組件傳遞給父組件自定義事件，要傳輸?shù)闹底痈冈谧咏M件中需要通過點(diǎn)擊事件傳遞給父組件值，點(diǎn)擊事件觸發(fā)后，通過自定義事件，要傳遞的值注意在父組件接收時(shí)必須在對(duì)應(yīng)的子組件接收相應(yīng)

一：父子組件之間的傳值**

父組件傳遞給子組件：需要在子組件中通過props接收值
子組件傳遞給父組件：$emit("自定義事件"，要傳輸?shù)闹?

子--->父
在子組件中需要通過點(diǎn)擊事件傳遞給父組件值，點(diǎn)擊事件觸發(fā)后，通過this.$emit("自定義事件"，要傳遞的值)
 **注意**在父組件接收時(shí)必須在對(duì)應(yīng)的子組件接收相應(yīng)的傳值操作。


(圖片是我盜的！侵刪??！)

  **注意**
  動(dòng)態(tài)數(shù)據(jù)需要用下圖方式

二、通過路由帶參數(shù)進(jìn)行傳值

①兩個(gè)組件 A和B,A組件通過query把orderId傳遞給B組件（觸發(fā)事件可以是點(diǎn)擊事件、鉤子函數(shù)等）
this.$router.push({ path: "/conponentsB", query: { orderId: 123 } }) // 跳轉(zhuǎn)到B
②在B組件中獲取A組件傳遞過來的參數(shù)
this.$route.query.orderId

三、通過設(shè)置 Session Storage緩存的形式進(jìn)行傳遞（這個(gè)沒用過）

①兩個(gè)組件A和B，在A組件中設(shè)置緩存orderData
const orderData = { "orderId": 123, "price": 88 }
sessionStorage.setItem("緩存名稱", JSON.stringify(orderData))
②B組件就可以獲取在A中設(shè)置的緩存了
const dataB = JSON.parse(sessionStorage.getItem("緩存名稱"))
此時(shí) dataB 就是數(shù)據(jù) orderData

五、vuex進(jìn)行傳值
為什么使用vuex?
vuex主要是是做數(shù)據(jù)交互，父子組件傳值可以很容易辦到，但是兄弟組件間傳值（兄弟組件下又有父子組件），或者大型spa單頁面框架項(xiàng)目，頁面多并且一層嵌套一層的傳值，異常麻煩，用vuex來維護(hù)共有的狀態(tài)或數(shù)據(jù)會(huì)顯得得心應(yīng)手。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106676.html

相關(guān)文章

  • 簡(jiǎn)單說說vue的父子組件，父子組件傳值和vuex

    摘要：我們需要在里改動(dòng)一下代碼首先就是綁定一個(gè)自定義事件再增加然后在中變成就是觸發(fā)父組件中的方法所以，觸發(fā)了父組件的函數(shù)，改變了父組件的的值，父組件再通過傳值給子組件。從而實(shí)現(xiàn)數(shù)據(jù)傳遞，父子組件通信。 一、vue的父子組件之間是如何傳值的？ 首先呢，需要說說的是，vue既然有雙向綁定，那為何會(huì)有父子組件之間的傳值問題？這個(gè)問題也簡(jiǎn)單，vue的組件會(huì)供其他的vue頁面進(jìn)行調(diào)用，如果數(shù)組都是雙...

    Tecode 評(píng)論0 收藏0

  • vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧

    摘要：同時(shí)有一種特殊的實(shí)現(xiàn)方案。組件之間傳值有這么幾種數(shù)據(jù)傳遞方式，和特殊的。在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。雙多方使用同名事件進(jìn)行溝通。數(shù)據(jù)非長(zhǎng)效數(shù)據(jù)，無法保存，只在后生效。這樣約定的好處是，我們能夠記錄所有中發(fā)生的改變。 前言 最近碰到了比較多的關(guān)于vue的eventBus的問題，之前定技術(shù)選型的時(shí)候也被問到了，vuex和eventBus的使用范圍。所以簡(jiǎn)單的寫一下。同時(shí)有一種特殊的實(shí)...

    xiaoxiaozi 評(píng)論0 收藏0

  • VueJS中學(xué)習(xí)使用Vuex詳解

    摘要：在單頁面組件的開發(fā)中的和的都統(tǒng)稱為同一狀態(tài)管理，個(gè)人的理解是全局狀態(tài)管理更合適簡(jiǎn)單的理解就是你在中定義了一個(gè)數(shù)據(jù)之后，你可以在所在項(xiàng)目中的任何一個(gè)組件里進(jìn)行獲取進(jìn)行修改，并且你的修改可以得到全局的響應(yīng)變更。 在SPA單頁面組件的開發(fā)中 Vue的vuex和React的Redux 都統(tǒng)稱為同一狀態(tài)管理，個(gè)人的理解是全局狀態(tài)管理更合適；簡(jiǎn)單的理解就是你在state中定義了一個(gè)數(shù)據(jù)之后，你可以...

    JessYanCoding 評(píng)論0 收藏0

  • VueJS中學(xué)習(xí)使用Vuex詳解

    摘要：在單頁面組件的開發(fā)中的和的都統(tǒng)稱為同一狀態(tài)管理，個(gè)人的理解是全局狀態(tài)管理更合適簡(jiǎn)單的理解就是你在中定義了一個(gè)數(shù)據(jù)之后，你可以在所在項(xiàng)目中的任何一個(gè)組件里進(jìn)行獲取進(jìn)行修改，并且你的修改可以得到全局的響應(yīng)變更。 在SPA單頁面組件的開發(fā)中 Vue的vuex和React的Redux 都統(tǒng)稱為同一狀態(tài)管理，個(gè)人的理解是全局狀態(tài)管理更合適；簡(jiǎn)單的理解就是你在state中定義了一個(gè)數(shù)據(jù)之后，你可以...

    qc1iu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<