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

資訊專欄INFORMATION COLUMN

vue父子組件間通信

617035918 / 2064人閱讀

摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。

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

1.父組件傳遞數據給子組件
父組件數據如何傳遞給子組件呢？可以通過props屬性來實現
父組件：

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

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

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

props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定默認的值 }}
這樣呢，就實現了父組件向子組件傳遞數據.

2.子組件與父組件通信
那么，如果子組件想要改變數據呢？這在vue中是不允許的，因為vue只允許單向數據傳遞，這時候我們可以通過觸發自定義事件來通知父組件改變數據，從而達到改變子組件數據的目的.

使用 v-on 綁定自定義事件
每個 Vue 實例都實現了事件接口(Events interface)，即：
使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件

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

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

父組件:

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

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

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

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

組件1觸發：

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

組件2接收:

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

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




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

當 ref 和 v-for 一起使用時， ref 是一個數組或對象，包含相應的子組件。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97575.html

相關文章

  • Vue 組件間通信方式

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

    hss01248 評論0 收藏0

  • Vue2.0父子組件間事件派發機制

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

    xietao3 評論0 收藏0

  • Vue.js 父子組件及非父子組件間實現通信

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

    lentrue 評論0 收藏0

  • vue組件間通信、數據傳遞（父子組件，同級組件）

    總結一下對vue組件通信的理解和使用。 一、組件目錄結構 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

    Harpsichord1207 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<