巧用Vue 父元件通過Prop向子元件傳值

2021-09-26 20:37:38 字數 1107 閱讀 8943

先看下vue官方的說法:

總結來說:prop是單向資料流。只能父傳子,子不可以傳父。但是有一種情況子可以直接傳父,而且無報警。

// 父元件

//父向子傳值

父元件:

// 子元件

// 子元件子元件:

官方推薦子元件最好定義乙個本地的data屬性用來接收prop傳過來的值。然後對本地data值進行操作處理,再通過$emit命令,將改變的值傳送給父元件,實現父子元件通訊。

在開發中,如果我們僅僅是通過子元件展示父元件傳過來的資料,並不會對資料進行操作,我們可以直接把prop傳過來的值直接繫結頁面展示即可,這樣,父元件值的更改,子元件可實時展示。

如果子元件本地data接收prop的值,這樣父元件值的更改,子元件無法獲知,這樣可以通過watch監聽prop資料的變化。

看如上**,如果我們頁面繫結prop資料,直接改變值,則頁面報錯。

vue不允許子元件直接改變父元件的值。

接下來,我們換下資料型別對上面的**稍稍改動再看下。

// 父元件

//父向子傳值

父元件:

// 子元件

// 子元件子元件:

我們將prop傳輸的資料型別改為object,在子元件直接更改prop傳過來的值頁面並不會報錯。這是為何?

因為object是引用資料型別,父子元件繫結的同乙個堆記憶體中的物件。

這可以作為乙個父子元件雙向通訊的簡易方案。

vue父元件向子元件傳遞資料prop

今天學習vue學到使用prop父向子傳遞資料,學了半天也沒懂什麼意思,沒學懂 記住不 true 查了下別人的學習經驗發現基本上都是拷貝vue官網的介紹,哎,不要臉的真多,能咋辦 繼續研究唄 他說是父元件向子元件傳遞繫結的資料 子元件接收父元件資料,那就逆向推理一下 text align center...

vue 通過Prop向子元件傳遞資料

template div id users users users users div template script import users from components users export default components script 解釋 把父元件中的data中的users 通...

vue 父元件通過props向子元件傳遞方法的方式

vue 中 data computed methods 中 this的上下文是vue例項,需注意。例如 注意,不應該對 data 屬性使用箭頭函式 例如data 理由是箭頭函式繫結了父級作用域的上下文,所以 this 將不會按照期望指向 vue 例項,this.myprop 將是 undefined...