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

資訊專欄INFORMATION COLUMN

vue父子組件間通信

617035918 / 2072人閱讀

摘要：為此可以使用為子組件指定一個(gè)索引。訪問子組件當(dāng)和一起使用時(shí)，是一個(gè)數(shù)組或?qū)ο?，包含相?yīng)的子組件。

父子通信目前有四種方式：

1.父組件傳遞數(shù)據(jù)給子組件
父組件數(shù)據(jù)如何傳遞給子組件呢？可以通過props屬性來實(shí)現(xiàn)
父組件：

 //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };}

子組件通過props來接收數(shù)據(jù):
方式1：
props: ["childMsg"]

方式2 :
props: { childMsg: Array //這樣可以指定傳入的類型，如果類型不對(duì)，會(huì)警告}

props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認(rèn)的值 }}
這樣呢，就實(shí)現(xiàn)了父組件向子組件傳遞數(shù)據(jù).

2.子組件與父組件通信
那么，如果子組件想要改變數(shù)據(jù)呢？這在vue中是不允許的，因?yàn)関ue只允許單向數(shù)據(jù)傳遞，這時(shí)候我們可以通過觸發(fā)自定義事件來通知父組件改變數(shù)據(jù)，從而達(dá)到改變子組件數(shù)據(jù)的目的.

使用 v-on 綁定自定義事件
每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)，即：
使用 $on(eventName) 監(jiān)聽事件
使用 $emit(eventName) 觸發(fā)事件

父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。

子組件:
``
methods: { up() { this.$emit("resultChange","hehe"); //主動(dòng)觸發(fā)resultChange方法，"hehe"為向父組件傳遞的數(shù)據(jù) }}

父組件:

//監(jiān)聽子組件觸發(fā)的upup事件,然后調(diào)用change方法
methods: { mychangHandle(msg) { this.msg = msg; }}

觸發(fā)事件使用駝峰格式的自定義事件名稱，在父組件中就可以使用on-evnet-name的形式來監(jiān)聽。

3.任意組件間通信
如果2個(gè)組件不是父子組件那么如何通信呢？這時(shí)可以通過eventHub來實(shí)現(xiàn)通信.
所謂eventHub就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來傳遞事件和接收事件.
使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：

let Hub = new Vue(); //創(chuàng)建事件中心,注意Hub要放在全局

組件1觸發(fā)：

methods: { eve() { Hub.$emit("change","hehe"); //Hub觸發(fā)事件 }}

組件2接收:

created() { Hub.$on("change", () => { //Hub接收事件 this.msg = "hehe"; });}

4. $refs
盡管有 props 和 events ，但是有時(shí)仍然需要在 JavaScript 中直接訪問子組件。為此可以使用 ref 為子組件指定一個(gè)索引 ID 。




var parent = new Vue({ el: "#parent" })
// 訪問子組件
var child = parent.$refs.profile

當(dāng) ref 和 v-for 一起使用時(shí)， ref 是一個(gè)數(shù)組或?qū)ο?，包含相?yīng)的子組件。

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

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

相關(guān)文章

  • 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

  • Vue2.0父子組件間事件派發(fā)機(jī)制

    摘要：從過來的都知道，在中，父子組件間事件通信的和被移除了。通過廣播和事件分發(fā)的機(jī)制，就顯得比較混亂了。在父組件中中然后，在子組件中，主要在任意事件回調(diào)中使用來觸發(fā)自定義的事件，后面還可以加上參數(shù)傳給父組件。 從vue1.x過來的都知道，在vue2.0中，父子組件間事件通信的$dispatch和$broadcase被移除了。官方考慮是基于組件樹結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)...

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

  • Vue.js 父子組件及非父子組件間實(shí)現(xiàn)通信

    摘要：想使用值的話通過進(jìn)行處理非父子組件間通信創(chuàng)建事件中心組件觸發(fā)組件接收 1. 父組件與子組件通信 父組件showImg(https://segmentfault.com/img/remote/1460000013945460); 子組件通過props來接收數(shù)據(jù): 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

    lentrue 評(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元查看
<