成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue 組件通信的解決方案

liukai90 / 1939人閱讀

摘要：數(shù)據(jù)通信首先我們通常說數(shù)據(jù)傳遞組件通信什么什么的我認(rèn)為可以分成兩種場景頁面和頁面之間組件和組件之間通信方案不管什么場景在使用的時(shí)候一般我們有下面種選擇去實(shí)現(xiàn)數(shù)據(jù)通信選擇通信方案我們?cè)谶x擇通信方案的時(shí)候比如說確定列表頁如何把每一項(xiàng)的傳遞給詳情

數(shù)據(jù)通信

首先, 我們通常說數(shù)據(jù)傳遞, 組件通信什么什么的, 我認(rèn)為可以分成兩種場景:

頁面和頁面之間

組件和組件之間

通信方案

不管什么場景, 在使用 Vue 的時(shí)候, 一般我們有下面 5 種選擇去實(shí)現(xiàn)數(shù)據(jù)通信.

vuex

storage

props

event

URL queryString

選擇通信方案

我們?cè)谶x擇通信方案的時(shí)候, 比如說確定 列表頁如何把每一項(xiàng)的 id 傳遞給 詳情頁的時(shí)候,
一般要考慮什么問題? 你是直接全套都是 vuex, 還是說喜歡使用 sessionStorage?

一般我們要考慮下面的幾個(gè)問題:

頁面是否可以刷新

頁面是否可以分享 (或者說URL 是否要求 RESTful)

數(shù)據(jù)更新之后, 所有使用此數(shù)據(jù)的組件是否都需要響應(yīng)更新

分析

先說 "頁面和頁面之間的通信場景", 首先上面的 5 種方案, 我們可選的有:

vuex, storage, URL queryString.

然后分析一下, 每一種方案, 它對(duì)上面的 3個(gè)問題, 是不是很好的解決掉了:
備注:
頁面通信場景不會(huì)要求實(shí)時(shí)響應(yīng), 因?yàn)榫退阆聜€(gè)頁面的確是實(shí)時(shí)響應(yīng), 你也看不見,
所以主要看 "刷新" 和 "分享"

vuex: 不能刷新, 不能分享
storage: 不能分享
url: 能刷新, 能分享

這樣看來, url queryString 的方式是 "頁面通信場景" 中的最佳選擇, 但是我依舊有疑慮:

我始終覺得把跳轉(zhuǎn)信息, 暴露給用戶, 是很不好的事情; (心理問題, 可以克服)

url 的長度限制; 這個(gè)無所謂的, 2k, 你再怎么傳遞, 我都不會(huì)覺得你會(huì)出現(xiàn)超過 2k 的情況

url 需要拼接, 這個(gè)拼接是否麻煩? 也不麻煩, 只是對(duì)象轉(zhuǎn)字符串.

這樣每個(gè)頁面都需要在進(jìn)入的時(shí)候先解析一下 queryString, 這樣是不是增加了麻煩的程度
也可以通過 mixins 來操作. 聚合到 mixins, 況且也不一定很多.

所以我們可以選擇 "url queryString" 作為 "頁面和頁面通信場景" 中的通信方案.
以后你就可以這樣用了:

比如列表頁面跳轉(zhuǎn)到詳情頁要帶一個(gè) id

    this.$router.push({
        path: "detail",
        query: {
            id
        }
    })

你的 url 會(huì)始終長這樣:

https://abc.com/#/?id=123

備注: 如果你的頁面不能刷新和分享, 你完全可以三種方案隨便選, 愛誰誰.

重點(diǎn): url queryString 的方式, 有一個(gè)問題解決不了:

從詳情頁到訂單頁, 通過 queryString 帶了商品信息過來, 假設(shè)此時(shí) url 長這樣:
    order/?goods=xxx
訂單頁面有一個(gè)收貨地址欄, 點(diǎn)擊可以進(jìn)入地址編輯頁面, 此時(shí)的 url 不會(huì)帶參數(shù)的(你可以試試帶一下看多麻煩)
    address-edit/
地址編輯頁面有一個(gè)保存按鈕, 點(diǎn)擊會(huì)返回到訂單頁面
    order/

so, url queryString 丟了.

我目前的解決方案:
針對(duì)這種存在多入口的頁面, 一定要在進(jìn)入它的第一時(shí)間, 先把 queryString 存起來.
并且做如下判斷:

if (// 存在 queryString) {
    // use queryString
} else {
    // use storage
}

但是這種方式還是搞不定 從地址編輯頁返回到訂單頁, 用戶此時(shí)分享訂單頁, 分享出去的玩意肯定會(huì)是錯(cuò)的.

現(xiàn)在來說下 "組件和組件之間的通信場景"
上面的 5 種方案, 可以選擇 vuex, event, props, storage

先看下 刷新, 分享和實(shí)時(shí)響應(yīng)
vuex, 不能刷新
event, props 能刷新能分享
storage 不能分享 & 實(shí)時(shí).

解釋:
為什么 vuex 在這里還是不能刷新
因?yàn)槿绻褂玫?state 里面的值是其他頁面設(shè)置的而不是 init 就存在的, 刷新丟值.
為什么 event, props 可以做到防刷新防分享
因?yàn)檫@兩個(gè)玩意是程序運(yùn)行它就生效的, 它也可以做到實(shí)時(shí)更新.
storage 雖然在存的時(shí)候有一個(gè)事件, 但是這太 trick 了.

所以我們選擇的是 event, props?

分析一下吧.
組件通信可以分成兩種, 父子, 同輩.

父子之間呢:
父傳子: props
子傳父: $emit(event)

這就是 "props down, events up";

但是其實(shí)還有:
父傳子: this.$refs.xxx
子傳父: this.$parent.xxx

還有: 自定義 v-model

還有: 讓 props 是一個(gè)對(duì)象.

同輩之間: event-bus.

所以這就完了? 啥都沒有了? 嗯, 就這樣.

思考

關(guān)于 vuex 的應(yīng)用場景的考慮
不是應(yīng)該所有的組件, 路由之間的數(shù)據(jù)傳遞都應(yīng)該通過 vuex, 當(dāng)同時(shí)存在兩種方式可以選擇的時(shí)候,選擇 vuex 的唯一理由只有一個(gè):

需要響應(yīng)式的狀態(tài)

why?

因?yàn)?vuex 雖然有輔助函數(shù), 但是用起來還是要 引入, 定義. 而且真的是一刷新頁面就掛了.

可以通過監(jiān)聽 beforeunload 事件, 在其中緩存 state, 然后在 onload 事件再恢復(fù), 這樣可以避免掉vuex 的丟值.

沒有必要追求全項(xiàng)目統(tǒng)一的一種通信方式, 理論上你不考慮刷新分享, 全項(xiàng)目都用 vuex, 什么事情也不會(huì)有的.

vuex 是狀態(tài)管理, 不是保存常量的地方.

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87119.html

相關(guān)文章

  • vue中8種組件通信方式, 值得收藏!

    摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

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

  • Vue 組件間通信方式

    摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

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

  • vue組件間通信六種方式（完整版）

    摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實(shí)例講述這其中的差別及使用場景，希望對(duì)小伙伴有些許幫助。狀態(tài)改變提交操作方法。 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：showImg(https://segmentfault.com/img/remote/146000001...

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

  • 【Vue項(xiàng)目總結(jié)】組件通信處理方案

    摘要：組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見諒。示例效果如下兄弟組件同級(jí)別組件相互間的通信，我們可以使用或著。 Vue組件之間的通信是我們?cè)陧?xiàng)目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結(jié)下作者在實(shí)際項(xiàng)目中所運(yùn)用到的通信方案，如有遺漏，請(qǐng)大家見諒。文章代碼具體見DEMO；文章首發(fā)于imon...

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

  • vue2.0開發(fā)聊天程序（三）組件的通信

    摘要：我在中寫了這段代碼在組件被創(chuàng)建時(shí)候?qū)?huì)執(zhí)行此函數(shù)相當(dāng)于進(jìn)入頁面的自執(zhí)行使用方法監(jiān)聽屬性并執(zhí)行一個(gè)回調(diào)函數(shù)按道理在元素被創(chuàng)建的時(shí)候，會(huì)將監(jiān)聽到的值賦給并且打印。 天地不仁以萬物為芻狗，宇宙無義視眾生如螻蟻　　　　　　　　　　　　　　　　　　——蕭鼎和我 上一節(jié)列出了５個(gè)關(guān)鍵點(diǎn)，第一個(gè)路由已經(jīng)解決了，接下來解決第二個(gè)問題： 組件的通信問題 一、組件的關(guān)系 組件之間的關(guān)系無非就是兩種父子關(guān)系...

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

  • VUE前端工程化（ 一）（掌握組件的多種通信及數(shù)據(jù)同步）

    摘要：是一個(gè)事件，它向下傳播到當(dāng)前實(shí)例的所有后代。由于后代擴(kuò)展為多個(gè)子樹，事件傳播將會(huì)遵循許多不同的路徑。組件修改實(shí)現(xiàn)遞歸地在父鏈上傳播事件。 組件通信 父子組件通信 父傳子 props屬性 子傳父 $emit事件 這兩種官方文檔里有很詳細(xì)的介紹就不解釋了 還是舉個(gè)栗子： //parent.vue父組件 parent: {{money}} ...

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

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

0條評(píng)論

閱讀需要支付1元查看
<