Vue中父元件向子元件通訊

2021-08-03 15:43:27 字數 1106 閱讀 1333

元件例項的作用域是孤立的。子元件的模板中是無法直接呼叫父元件的資料。

可以使用props將父元件的資料傳給子元件。子元件在接受資料時要顯示宣告props

看下面的例子

here='china'>

panda>

div>

src="">

script>

src="">

script>

vue.component('panda',}`})

new vue()

script>

頁面上展示的是panda from china

處理屬性中帶』-『的問題

vue是不支援帶槓的寫法的。

如果上述的here變成from-here。需要這樣寫(小駝峰的寫法)

from-here='china'>

panda>

div>

vue.component('panda',}`})

new vue()

script>

如果需要動態繫結,需要用到v-bind

:here='msg'>

panda>

div>

src="">

script>

src="">

script>

vue.component('panda',}`})

new vue(

})script>

body>

這樣子元件就展示出了父元件的資訊(把構造器中的data值傳遞給元件)。而且是動態繫結(用了v-bind)的。當父元件的data.msg發生變化的時候。子元件裡面的內容也會相應的發生變化。

注意:props預設是單向繫結:當父元件的屬性變化時,將傳導給子元件,但是反過來不會。這是為了防止子元件無意修改了父元件的狀態

Vue中父元件向子元件通訊的方法

props 元件例項的作用域是孤立的。子元件的模板中是無法直接呼叫父元件的資料。可以使用props將父元件的資料傳給子元件。子元件在接受資料時要顯示宣告props 看下面的例子 頁面上展示的是 panda from china 處理屬性中帶 的問題 vue是不支援帶槓的寫法的。如果上述的here變成...

vue中父元件向子元件傳參

專案中經常用到元件與元件的傳參以及父元件跟子元件的傳參,還有子元件跟父元件的傳參,下面大概說下父元件向子元件傳參的整個過程,如果有不對的地方,望指正。在父元件中 子元件 按鈕 在這裡,父元件向子元件傳遞的是乙個物件,而我們利用v bind動態繫結了table,以乙個物件的形式傳遞過去,在子元件中用p...

VUE中父元件向子元件傳值

我們在使用vue開發的時候,有時候需要通過父元件像子元件傳遞資料或者為了防止每個子元件都會有請求資料事件的發生,從而導致 冗餘,所以,我們可以把同乙個模組下的所有子元件請求事件都放到父元件中去處理。1 父元件通過屬性的方式給子元件傳值 注意 city 和 swiperlist 這裡定義的什麼名字,子...