国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Tecode / 1403人閱讀

摘要：我們需要在里改動(dòng)一下代碼首先就是綁定一個(gè)自定義事件再增加然后在中變成就是觸發(fā)父組件中的方法所以，觸發(fā)了父組件的函數(shù)，改變了父組件的的值，父組件再通過(guò)傳值給子組件。從而實(shí)現(xiàn)數(shù)據(jù)傳遞，父子組件通信。

一、vue的父子組件之間是如何傳值的？
首先呢，需要說(shuō)說(shuō)的是，vue既然有雙向綁定，那為何會(huì)有父子組件之間的傳值問(wèn)題？這個(gè)問(wèn)題也簡(jiǎn)單，vue的組件會(huì)供其他的vue頁(yè)面進(jìn)行調(diào)用，如果數(shù)組都是雙向綁定的話，那么就容易混亂了，比如a,b頁(yè)面綁了一個(gè)num=10，那b，c頁(yè)面又綁了num=5,那vue實(shí)例的num到底聽(tīng)誰(shuí)的？所以，這就是vue官網(wǎng)為什么說(shuō)
組件之間的數(shù)據(jù)只能是單項(xiàng)流通的，而且由父組件傳遞給子組件
好，接下來(lái)就話不多說(shuō)了，父子組件是如何傳值的，而且誰(shuí)是父誰(shuí)是子呢？
例子1：先寫(xiě)一個(gè)組件放在component文件夾下叫son.vue好了（有點(diǎn)劇透的命名...）

這個(gè)son.vue的組件相信大家都看得懂，加減num的組件。接下來(lái)寫(xiě)一個(gè)index.vue調(diào)用son.vue

//index.vue

這時(shí)候兩個(gè)num都是10。再次點(diǎn)擊加減按鈕，我們會(huì)發(fā)現(xiàn)，‘son的num’一直有變化，而‘index的num’一直是10，這就是數(shù)據(jù)的單項(xiàng)流通。那么我們?nèi)绾吸c(diǎn)擊按鈕然后改變‘index的num’呢？這時(shí)候，需要$emit干活了。

我們需要在index.vue里改動(dòng)一下代碼
首先：

//v-on:add="icr"就是綁定一個(gè)自定義事件

再增加

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

然后在son.vue中methods變成

methods:{
   add(){
       this.$emit("add");//$emit("add")就是觸發(fā)父組件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

所以，$emit("xxx")觸發(fā)了父組件的函數(shù)，改變了父組件的data的num值，父組件再通過(guò)props傳值給子組件。從而實(shí)現(xiàn)數(shù)據(jù)傳遞，父子組件通信。
這是son.vue和index.vue的完整代碼

//son.vue



//index.vue

二、說(shuō)說(shuō)vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官網(wǎng)上說(shuō)是一個(gè)vue的狀態(tài)管理工具?？赡軤顟B(tài)比較難理解，大家可以簡(jiǎn)單地把狀態(tài)理解成為vue的data里面的變量。當(dāng)組件之間的data變量關(guān)系復(fù)雜一點(diǎn)的時(shí)候，就把其中的變量抽離出來(lái)管理。剛好大家可以看看上面，父子組件之間的num之間的通信是不是比較麻煩，改變數(shù)據(jù)還要用$emit。如果有一個(gè)地方跟倉(cāng)庫(kù)一樣就存放著num的值，誰(shuí)要用誰(shuí)去請(qǐng)求num的值，誰(shuí)想改就改該多好是吧，vuex就是干這個(gè)的，有點(diǎn)全局變量的意思。任何組件需要拿，改東西，都可以找他。

1、首先state是惟一的數(shù)據(jù)載體，跟倉(cāng)庫(kù)一樣。
2、而mutations是唯一可以改變state的值的東東，使用commit等。
這兩個(gè)是vuex最最基礎(chǔ)缺一不可的。簡(jiǎn)單的vuex管理就使用這兩個(gè)就行，如何使用vuex？看這里https://segmentfault.com/a/11...
3、getters的官方說(shuō)明：派生出新的狀態(tài)，這個(gè)比較難理解。簡(jiǎn)單來(lái)說(shuō)，就是過(guò)濾，組合！
比如說(shuō)state里面存了一個(gè)數(shù)組，數(shù)組有好多個(gè)數(shù)據(jù)，而我只想要用status：0的那些個(gè)，就可以用getters。是不是有點(diǎn)過(guò)濾的意思。所以getters有時(shí)候還很好用，很必要！。
4、actions是用來(lái)提交mutations，為什么不用actions直接修改state值呢？其實(shí)大多數(shù)的管理工具都是這樣做的，比如redux，mobx。actions定義修改的動(dòng)作并且進(jìn)行數(shù)據(jù)請(qǐng)求，通過(guò)commit再去觸發(fā)對(duì)應(yīng)的mutations。是很重要的一個(gè)屬性，也符合解耦的思想。
5、modules也是輔助方法。比如modulesA有一個(gè)完整的state、actions、getters、mutations；modulesB也可以有一個(gè)完整的state、actions、getters、mutations，他就是將store分割成模塊，避免混淆。

好了，今天就說(shuō)這一些，還是需要自己多看官網(wǎng)文檔，多實(shí)踐。跪求各位大牛指導(dǎo)！學(xué)習(xí)真難，求帶帶我...

最后還是說(shuō)一下，如果文章對(duì)你有幫助的話，請(qǐng)給我一個(gè)star鼓勵(lì)一下，我還沒(méi)工作呢。。。嗚嗚嗚

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

  • Vue2從0到1(四)：Vue組件化及組件間傳值

    摘要：前面講了環(huán)境的搭建用打包和的使用以及的使用下面講一下組件化及組件間傳值主要包括父子組件間傳值，兄弟組件間傳值，不相關(guān)組件間傳值。組件化及組件間傳值組件化組件是最強(qiáng)大的功能之一。 前面講了環(huán)境的搭建用webpack打包vue和Vue-router的使用以及vuex的使用 下面講一下Vue組件化及組件間傳值： 主要包括 父子組件間傳值，兄弟組件間傳值，不相關(guān)組件間傳值。 10.Vue組件...

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

  • vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級(jí)組件）

    總結(jié)一下對(duì)vue組件通信的理解和使用。 一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請(qǐng)輸入單價(jià): import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

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

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

0條評(píng)論

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