vue元件通訊

1.父子元件通訊： 父元件將自己的資料傳遞給子元件

父元件將自己的資料通過屬性繫結的形式傳遞給子元件

子元件在自己的配置項中通過 props 來接收這個屬性

vue.component(『son』,

})這個屬性可以直接向全域性變數一樣使用

我老爸給了我：} 錢

2.子父元件通訊：

子元件將乙個資料傳送給父元件

如何實現：自定義事件

流程：父元件中定義乙個資料，然後在methods定義乙個方法用來修改這個資料

vue.

component
('father',}
,    methods:}}
)

子元件可以通過 this.emi

t(自定

義事件名

稱，引數

1，引數

2...)來

訂閱這個

自定義事

件thi

s.

emit( 自定義事件名稱，引數1，引數2...) 來訂閱這個自定義事件 this.

emit(自

定義事件

名稱，參

數1，參

數2..

.)來訂

閱這個自

定義事件

this

.emit(『aa』,this.money)

3.非父子元件通訊第一種形式 ： ref鏈繫結

ref不僅可以繫結元件，也可以繫結普通元素

業務： 別的元件中獲取另外乙個元件？

解決： 繫結ref

vue.

component
('brother',}
,    methods:}}
)vue.
component
('sister',}
})newvue(}
)

事件的發布 $on

事件的訂閱 $emit

通過 new vue 在得到另外乙個例項

var bus =

newvue()
vue.
component
('brother',}
,    methods:}}
)vue.
component
('sister',}
,mounted()
)}})
newvue
()

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...