組件目錄結(jié)構(gòu)
parent
child
API: $emit、 $on、 $refs、 props
1、父子組件通信
需求合理性我們先不考慮,demo就為了搞清怎么通信,我們要求:
1、父組件傳值給子組件,同時(shí)父組件input輸入框value也可同步到子組件
2、點(diǎn)擊子組件加減子組件數(shù)字跟隨變動(dòng), 父組件input value跟隨變動(dòng),
+ -
import addChild from "@/components/add"
//并在父組件內(nèi)注冊(cè)子組件 components:{ addChild }
// v-bind:count="count" 父組件傳遞值給子組件,v-on:add="add"監(jiān)聽(tīng)子組件 (用v-bind和v-on有助于更好的理解,熟悉了我們可以簡(jiǎn)化)
props:{ count:{ //約定數(shù)據(jù)類(lèi)型 type: Number, //默認(rèn)值 default: 0 } } 接收父組件傳遞的值count
methods:{ add(){ this.$emit("childAdd",this.count + 1) }, reduce(){ this.$emit("childReduce", this.count - 1) } } //父組件監(jiān)聽(tīng)子組件指令childAdd、childReduce 并觸發(fā)父組件方法add、reduce
以上父組件穿值給子組件,子組件觸發(fā)事件給父組件搞定,總結(jié)一下,父組件v-bind:count="count"穿值給子組件,子組件props:接收(props接收的父組件的值相當(dāng)于子組件內(nèi)定義data只不過(guò)不能直接修改疑問(wèn)可搜索子組件為什么不能直接修改父組件值),繼續(xù),子組件定義方法并執(zhí)行emit指令定義指令名字“childAdd、childReduce”,當(dāng)子組件觸發(fā)add、reduce方法觸發(fā)emit并發(fā)指令給父組件,父組件v-on:childAdd(簡(jiǎn)寫(xiě)@childAdd) 監(jiān)聽(tīng)并觸發(fā)父組件方法,如下圖
接下來(lái)我們?cè)儆?on,監(jiān)聽(tīng)指令不在dom內(nèi),直接寫(xiě)在js中 上圖
標(biāo)注忽略了 child組件ref="addChild" 和普通獲取操作dom一樣
我們?cè)倏纯碿onsole this.refs
這樣我們就可以做到和dom內(nèi)監(jiān)聽(tīng)子組件一樣的效果
當(dāng)然這樣寫(xiě)感覺(jué)惡心了不少,不過(guò)我是為了引出父組件直接操作子組件方法做個(gè)引子
ok父子組件通信算是說(shuō)完了
你的點(diǎn)贊是我的動(dòng)力 謝謝
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/100366.html
摘要:本身提供哪幾種通信方式首先靈感源于,支持雙向綁定,本質(zhì)還是單向數(shù)據(jù)流。跟一樣,組件間最基本的數(shù)據(jù)流是通過(guò)向子組件傳遞數(shù)據(jù)。但是在卻很少使用,因?yàn)榻M件可以自定義事件,即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫(xiě),不支持移動(dòng)端平臺(tái),所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架,那么組件間的數(shù)據(jù)通信是必然的事情,那么組件間如何進(jìn)行數(shù)...
摘要:從過(guò)來(lái)的都知道,在中,父子組件間事件通信的和被移除了。通過(guò)廣播和事件分發(fā)的機(jī)制,就顯得比較混亂了。在父組件中中然后,在子組件中,主要在任意事件回調(diào)中使用來(lái)觸發(fā)自定義的事件,后面還可以加上參數(shù)傳給父組件。 從vue1.x過(guò)來(lái)的都知道,在vue2.0中,父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹(shù)結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解,并且在組件結(jié)...
摘要:一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù),而通過(guò)子組件可以向父組件通信。而且只讀,不可被修改,所有修改都會(huì)失效并警告。 之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專(zhuān)門(mén)總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要,那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢?首先我們需要知道在vue中組件之間存在什么樣...
摘要:想使用值的話通過(guò)進(jìn)行處理非父子組件間通信創(chuàng)建事件中心組件觸發(fā)組件接收 1. 父組件與子組件通信 父組件showImg(https://segmentfault.com/img/remote/1460000013945460); 子組件通過(guò)props來(lái)接收數(shù)據(jù): 格式1: props: [childMsg] 格式2 : props: { childMsg: Array //指定...
摘要:為此可以使用為子組件指定一個(gè)索引。訪問(wèn)子組件當(dāng)和一起使用時(shí),是一個(gè)數(shù)組或?qū)ο螅鄳?yīng)的子組件。 父子通信目前有四種方式: 1.父組件傳遞數(shù)據(jù)給子組件父組件數(shù)據(jù)如何傳遞給子組件呢?可以通過(guò)props屬性來(lái)實(shí)現(xiàn)父組件: //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過(guò)props來(lái)接收數(shù)據(jù):方式1:props: [childMs...
閱讀 3329·2021-11-18 10:02
閱讀 1548·2021-10-12 10:08
閱讀 1369·2021-10-11 10:58
閱讀 1354·2021-10-11 10:57
閱讀 1255·2021-10-08 10:04
閱讀 2202·2021-09-29 09:35
閱讀 851·2021-09-22 15:44
閱讀 1345·2021-09-03 10:30