元件對於vue來說非常重要,學習學習了基礎vue後,再回過頭來把元件弄透!
元件意味著協同工作,通常父子元件會是這樣的關係:元件 a 在它的模版中使用了元件 b 。
它們之間必然需要相互通訊:父元件要給子元件傳遞資料,子元件需要將它內部發生的事情告知給父元件。
在 vue.js 中,父子元件的關係可以總結為 props down, events up。
父元件通過 props 向下傳遞資料給子元件,子元件通過 events 給父元件傳送訊息。
看看它們是怎麼工作的。
元件例項的作用域是孤立的。這意味著不能(也不應該)在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的props選項。
子元件要顯式地用props
選項宣告它期待獲得的資料:
js:
vue.component(
'child', }'
}) 然後我們可以這樣向它傳入乙個普通字串:
父元件向子元件傳遞資料 14 父元件向子元件通訊
1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...
Vue中父元件向子元件通訊
元件例項的作用域是孤立的。子元件的模板中是無法直接呼叫父元件的資料。可以使用props將父元件的資料傳給子元件。子元件在接受資料時要顯示宣告props 看下面的例子 here china panda div src script src script vue.component panda new ...
vue子元件向父元件傳值。
1 子,父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...