Vue.js組件通信的幾種姿勢
寫在前面
因為對Vue.js很感興趣,而且平時工作的技術(shù)棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結(jié)與輸出。
文章的原地址: https://github.com/answershuto/learnVue 。
在學習過程中,為Vue加上了中文的注釋 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以對其他想學習Vue源碼的小伙伴有所幫助。
可能會有理解存在偏差的地方,歡迎提issue指出,共同學習,共同進步。
什么是Vue組件?
組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,封裝可重用的代碼。在較高層面上,組件是自定義元素,Vue.js 的編譯器為它添加特殊功能。在有些情況下,組件也可以是原生 HTML 元素的形式,以 is 特性擴展。
Vue組件間通信
父組件向子組件通信
方法一:props
使用 props ,父組件可以使用props向子組件傳遞數(shù)據(jù)。
父組件vue模板father.vue
<template> <child :msg="message"></child> </template> <script> import child from './child.vue'; export default { components: { child }, data () { return { message: 'father message'; } } } </script>
子組件vue模板child.vue
<template> <div>{{msg}}</div> </template> <script> export default { props: { msg: { type: String, required: true } } } </script>
方法二 使用$children
使用 $children 可以在父組件中訪問子組件。
子組件向父組件通信
方法一:使用 vue事件
父組件向子組件傳遞事件方法,子組件通過$emit觸發(fā)事件,回調(diào)給父組件。
父組件vue模板father.vue
<template> <child @msgFunc="func"></child> </template> <script> import child from './child.vue'; export default { components: { child }, methods: { func (msg) { console.log(msg); } } } </script>
子組件vue模板child.vue
<template> <button @click="handleClick">點我</button> </template> <script> export default { props: { msg: { type: String, required: true } }, methods () { handleClick () { //........ this.$emit('msgFunc'); } } } </script>
方法二: 通過修改父組件傳遞的props來修改父組件數(shù)據(jù)
這種方法只能在父組件傳遞一個引用變量時可以使用,字面變量無法達到相應(yīng)效果。因為飲用變量最終無論是父組件中的數(shù)據(jù)還是子組件得到的props中的數(shù)據(jù)都是指向同一塊內(nèi)存地址,所以修改了子組件中props的數(shù)據(jù)即修改了父組件的數(shù)據(jù)。
但是并不推薦這么做,并不建議直接修改props的值,如果數(shù)據(jù)是用于顯示修改的,在實際開發(fā)中我經(jīng)常會將其放入data中,在需要回傳給父組件的時候再用事件回傳數(shù)據(jù)。這樣做保持了組件獨立以及解耦,不會因為使用同一份數(shù)據(jù)而導致數(shù)據(jù)流異?;靵y,只通過特定的接口傳遞數(shù)據(jù)來達到修改數(shù)據(jù)的目的,而內(nèi)部數(shù)據(jù)狀態(tài)由專門的data負責管理。
方法三:使用$parent
使用 $parent 可以訪問父組件的數(shù)據(jù)。
非父子組件、兄弟組件之間的數(shù)據(jù)傳遞
非父子組件通信,Vue官方推薦 使用一個Vue實例作為中央事件總線 。
Vue內(nèi)部有一個事件機制,可以參考 源碼 。
$on方法用來監(jiān)聽一個事件。
$emit用來觸發(fā)一個事件。
/*新建一個Vue實例作為中央事件總嫌*/ let event = new Vue(); /*監(jiān)聽事件*/ event.$on('eventName', (val) => { //......do something }); /*觸發(fā)事件*/ event.$emit('eventName', 'this is a message.');
多層級父子組件通信:
在Vue1.0中實現(xiàn)了$broadcast與$dispatch兩個方法用來向子組件(或父組件)廣播(或派發(fā)),當子組件(或父組件)上監(jiān)聽了事件并返回true的時候會向爺孫級組件繼續(xù)廣播(或派發(fā))事件。但是這個方法在Vue2.0里面已經(jīng)被移除了。
之前在學習餓了么的開源組件庫 element 的時候發(fā)現(xiàn)他們重新實現(xiàn)了broadcast以及dispatch的方法,以mixin的方式引入,具體可以參考 《說說element組件庫broadcast與dispatch》 。但是跟Vue1.0的兩個方法實現(xiàn)有略微的不同。這兩個方法實現(xiàn)了向子孫組件事件廣播以及向多層級父組件事件派發(fā)的功能。但是并非廣義上的事件廣播,它需要指定一個commentName進行向指定組件名組件定向廣播(派發(fā))事件。
其實這兩個方法內(nèi)部實現(xiàn)還是用到的還是$parent以及$children,用以遍歷子節(jié)點或是逐級向上查詢父節(jié)點,訪問到指定組件名的時候,調(diào)用$emit觸發(fā)指定事件。
復(fù)雜的單頁應(yīng)用數(shù)據(jù)管理
當應(yīng)用足夠復(fù)雜情況下,請使用 vuex 進行數(shù)據(jù)管理。
總結(jié)
以上所述是小編給大家介紹的Vue.js組件通信的幾種姿勢,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程
在最近的一個項目中我需要實現(xiàn)表格的翻頁,并且還要實現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關(guān)于vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程的相關(guān)資料,需要的朋友可以參考下2022-12-12