成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

VUE組件間的數(shù)據(jù)傳遞

Half / 2838人閱讀

摘要：是雖說吸取了的的思想，但是它是單向數(shù)據(jù)流的，也就是說子組件無(wú)法直接改變父組件狀態(tài)。父組件向子組件傳遞數(shù)據(jù)該方式的數(shù)據(jù)傳遞是遵循單向數(shù)據(jù)流的規(guī)則的，因此使用起來(lái)十分的自然。

眾所周知，Vue 是基于組件來(lái)構(gòu)建 web 應(yīng)用的。組件將模塊和組合發(fā)揮到了極致。Vue 是雖說吸取了 AngularJs 的 MVVM的思想，但是它是單向數(shù)據(jù)流的，也就是說子組件無(wú)法直接改變父組件狀態(tài)。下面總結(jié)出常用的組件消息傳遞的方式。

父組件向子組件傳遞數(shù)據(jù)

該方式的數(shù)據(jù)傳遞是遵循 Vue 單向數(shù)據(jù)流的規(guī)則的，因此使用起來(lái)十分的自然。若父組件的數(shù)據(jù)改變子組件的 UI 展現(xiàn)也隨之變化。
Parent.vue

Child.vue

效果如下：

子組件修改父組件的數(shù)據(jù)

這里介紹兩種方式：
1、子組件觸發(fā)事件，父組件監(jiān)聽事件做出數(shù)據(jù)改變
2、父組件將數(shù)據(jù)變更方法以 props 的形式傳給子組件（借鑒 react 的父子通信方式）

監(jiān)聽事件

父組件上通過 v-on 監(jiān)聽子組件所觸發(fā)的事件。
EventParent.vue

EventChild.vue

效果如圖：

傳遞props

因?yàn)樽约簩?react 較多，所以好奇 Vue 是否支持子組件回調(diào)父組件的事件處理函數(shù)，試了一下是可以的。好像 Element UI 使用該方式較多。個(gè)人認(rèn)為該方法和事件方式同樣靈活。
Parent.vue

Child.vue

以 props 的這種方式大家可以嘗試實(shí)現(xiàn)一下是一種新的思路。

非父子組件間的通信

上述三個(gè)實(shí)例都在講述父子組件的通信，那么不相關(guān)的組件該如何通信呢？可以創(chuàng)建一個(gè) Vue 的實(shí)例作為橋來(lái)中轉(zhuǎn)事件。
eventHub.js

import Vue from "vue";

export default new Vue();

Child01.vue

Child02.vue

效果如圖：

總結(jié)

父組件改變子組件的數(shù)據(jù)利用正常單向數(shù)據(jù)流的特性即可，子組件改變父組件的數(shù)據(jù)可以通過事件或者函數(shù) props 兩種方式實(shí)現(xiàn)，非父子組件通信則利用 EventHub 中轉(zhuǎn)一下。

實(shí)例代碼

歡迎大家指正批評(píng)、或留言。QQ群：538631558

【開發(fā)環(huán)境推薦】Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境，支持絕大部分編程語(yǔ)言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無(wú)需下載安裝程序，一鍵切換開發(fā)環(huán)境。 Cloud Studio提供了完整的 Linux 環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。

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

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

相關(guān)文章

  • vue組件通信全面總結(jié)

    摘要：當(dāng)一個(gè)組件沒有聲明任何時(shí)，這里會(huì)包含所有父作用域的綁定和除外，并且可以通過傳入內(nèi)部組件在創(chuàng)建高級(jí)別的組件時(shí)非常有用。 寫在前面 組件間的通信是是實(shí)際開發(fā)中非常常用的一環(huán)，如何使用對(duì)項(xiàng)目整體設(shè)計(jì)、開發(fā)、規(guī)范都有很實(shí)際的的作用，我在項(xiàng)目開發(fā)中對(duì)此深有體會(huì)，總結(jié)下vue組件間通信的幾種方式，討論下各自的使用場(chǎng)景 文章對(duì)相關(guān)場(chǎng)景預(yù)覽 父->子組件間的數(shù)據(jù)傳遞 子->父組件間的數(shù)據(jù)傳遞 兄弟...

    余學(xué)文 評(píng)論0 收藏0

  • 幾種常見的Vue組件間的傳參方式

    摘要：缺點(diǎn)用這種方法寫出來(lái)的組件十分難維護(hù)，因?yàn)槟悴⒉恢罃?shù)據(jù)的來(lái)源是哪里，有悖于單向數(shù)據(jù)流的原則拿到的是一個(gè)數(shù)組，你并不能很準(zhǔn)確的找到你要找的子組件的位置，尤其是子組件多的時(shí)候。 幾種常見的Vue組件間的傳參方式 Vue父子組件通訊的方法其實(shí)有很多，本文只是做一個(gè)總結(jié)，說說他們的優(yōu)缺點(diǎn)，具體如何使用相關(guān)文檔和網(wǎng)上大神已經(jīng)總結(jié)的很多里，這里就不再說明。 1.Vuex 介紹 Vuex 是一個(gè)專...

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

  • Vue 組件間傳參最佳實(shí)踐

    摘要：父子組件間的數(shù)據(jù)傳遞從父組件獲取子組件的數(shù)據(jù)通過綁定將父組件的數(shù)據(jù)關(guān)聯(lián)到子組件，并修飾或者用同步來(lái)自子組件的數(shù)據(jù)變化使用父組件子組件默認(rèn)初始值是，所以是顯示的關(guān)閉父組件子組件綁定事件監(jiān)聽器，當(dāng)子組件狀態(tài)或者數(shù)據(jù)發(fā)生變化時(shí)，觸發(fā)事 1.父子組件間的數(shù)據(jù)傳遞 1.1從父組件獲取子組件的數(shù)據(jù) 1.1.1通過綁定 props 將父組件的數(shù)據(jù)關(guān)聯(lián)到子組件，并修飾 .sync 或者用 v-mode...

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

  • vue學(xué)習(xí)筆記（三）

    摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

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

  • vue學(xué)習(xí)筆記（三）

    摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來(lái)創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

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

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

0條評(píng)論

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