vue元件 構成元件 父元件向子元件傳遞資料

2021-09-07 11:53:05 字數 1008 閱讀 3934

元件對於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...