Vue 元件通訊

2021-09-25 04:05:37 字數 881 閱讀 3025

父子元件通訊(通過props實現)

具體步驟:

1. 在父元件的模板中將資料用單項資料繫結的形式,繫結在子元件身上

2. 在子元件的配置項中可以使用乙個props配置項來接收這個資料,接收時,props的取值可以使乙個陣列

vue.component('son',)

3. 在子元件模板中,接收到的屬性可以像全域性變數一樣直接使用

父親給了我 } 錢

案例:

//aa為自定義

父親給了我 } 錢

子父通訊流程

1. 在父元件的模板中,通過事件繫結的形式,繫結乙個自定義事件在子元件身上

//這邊要注意: fn是要在父元件配置項methods中定義

2. 在子元件的配置項methods中寫乙個事件處理程式,在事件處理程式中觸發父元件繫結的自定義事件

vue.component('son',

},methods: }})

3. 將子元件定義的事件處理程式 givefather,繫結在子元件的按鈕身上

give

例: 兒子給了我}元

give

實質就是乙個子元件把資料傳給他的父元件,父元件再將資料傳給另乙個子元件

例:

father的 n: }

輸出girl的this

##動態元件

1:什麼是動態元件?

動態元件是可以改變的元件

2:動態元件如何使用?

通過vue提供了乙個 component + is 屬性

案例:

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...