iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ系列 第 9

Day09 - 物件要解構成 primitive 再傳入 props ,小心 by reference 動到不該動的兄弟

今天念 重新認識 Vue.js | Kuro Hsu 2-2 元件之間的溝通傳遞
在 HTML 裡的 root instance (即綁定 root instance 的 #app)範圍內,或是在 Vue CLI 的 App.vue 檔中的 template 範圍內,我們可以藉由 將父元件的資料指定給子元件的 props ,讓子元件得以取得父元件的資料,但要小心若父元件欲傳入的資料為 by reference 者,應該將該資料解構為 by value 的 primitive


避免這樣直接傳整個 object

<my-component :userInfoInChildProp="userInfoInFatherComponent"></my-component>

應該將 object 解構成 primitive 再傳入 props,當然這樣子元件也得多設幾個 props 坑

<my-component :userNameInChildProp="userInfoInFatherComponent.name"
              :userAgeInChildProp="userInfoInFatherComponent.age"
              :userHabbitInChildProp="userInfoInFatherComponent.habbit"></my-component>

今天理解到這邊~如果上述內容有出入,希望能順手做愛心幫忙提點了 ~ (っಠ‿ಠ)っ


上一篇
Day08 - 用 axios 做登入功能
下一篇
Day10 - 子元件透過 emit event 觸發父元件事件
系列文
Vue 3 請你幫我做一個網站好嗎 (っಠ‿ಠ)っ19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言