vue學習記錄 父子元件間傳遞資料

2021-08-15 18:58:41 字數 1013 閱讀 1309

在 vue 中,父子元件之間的關係可以概述為:

props 向下,events 向上

。父元件通過 

props

向下傳遞資料給子元件,子元件通過 

events

傳送訊息給父元件。

demo的目錄結構如下:

demo顯示效果如下;

一、父元件向子元件傳遞資料(父元件通過props向子元件傳遞資料)

父元件的**如下圖:

父元件中定義乙個object,通過v-bind自定義屬性parentdata繫結到控制項上,通過parentdata傳給子元件,在子元件的props中獲取parentdata傳遞過來的資料

子元件中的**:

在 props 中新增了元素之後,就不需要在 data 中再新增變數了

二、子元件向父元件傳遞資料(子元件主要通過事件向父元件傳遞資料)

父元件**如下:

父元件通過自定義childdata事件獲取從子元件傳遞來的資料

子元件**如下:

子元件中input輸入框中有所變化時會呼叫changeuser方法,該方法中通過$emit將this.uername值傳給父元件

vue 父子元件的傳遞 非父子元件間的傳遞

1.父元件傳遞資料給子元件 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料.2.子元件與父元件通...

vue 父子元件傳遞

子元件接收父元件的資料可以使用props和bind進行 父元件 監聽子元件觸發的changehi事件,然後呼叫changehi方法 子元件 props cdata 接收父元件傳遞 父元件要監聽子元件的事件發生可以使用emit和on進行,子元件必須要觸發事件,然後父元件才可以接收到。子元件 metho...

vue父子元件間互相傳遞資料

vue父子元件間傳遞引數 1.父傳子 使用 props 向子元件傳遞資料。在父元件中定義 hmsg引數,v bind 繫結childmsg的值為hmsg 子元件使用props獲取父元件傳遞過來的資料 parent.vue parenth2 child1msg hmsg child1 div temp...