vue父子組件間引用之$parent、$children
vue中提到【父子組件】,則一定會想到我們常用的父子組件通信:props+$on()
、$emit()
,如圖:
也就是說,雖然在一般情況下,子組件是不能引用父組件或者Vue實(shí)例的數(shù)據(jù),但是對于在開發(fā)中出現(xiàn)的“數(shù)據(jù)需要在組件中來回傳遞”,我們最簡單的解決辦法就是通過props(和v-on)將數(shù)據(jù)從父組件傳到子組件,再用$emit
將數(shù)據(jù)從子組件傳到父組件,以此循環(huán)引用。
但是在另一些場景下,我們可能想要比如(在父組件中)拿到子組件對象,然后直接操作其中數(shù)據(jù),去實(shí)現(xiàn)一些功能,比如方法的調(diào)用。
有時(shí)候我們需要父組件直接訪問子組件、子組件直接訪問父組件,或者子組件訪問根組件:
- 父組件訪問子組件:使用
$children
或$refs
reference - 子組件訪問父組件:使用
$parent
父子組件的訪問方式之:$children
children很特別,查閱資料可以發(fā)現(xiàn):this.$children
是一個(gè)數(shù)組類型,它包含了所有子組件對象:
<body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc></mxc> <button @click="btnClick">顫抖吧</button> </div> <template id="mxc"> <div>我是子組件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$children) } }, components:{ mxc:{ template:'#mxc', methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
點(diǎn)擊(父組件)按鈕之后:
我們還可以通過循環(huán)拿到所有子組件數(shù)據(jù):
<body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc></mxc> <button @click="btnClick">顫抖吧</button> </div> <template id="mxc"> <div>我是子組件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$children) for(let c of this.$children){ console.log(c.name) } } }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是子組件的name' } }, methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
點(diǎn)擊(父組件)按鈕之后:
因?yàn)槭菙?shù)組,所以我們可以通過比如:this.$children[2]
來拿到第三個(gè)子組件的數(shù)據(jù)。
但是這么做有一個(gè)問題:比如開發(fā)時(shí)突然在這三個(gè)子組件中又插入了一個(gè)子組件(可能相同,也可能不同),這時(shí)候【2】就不再是我們需要的了。。。
所以我們可以用vue-DOM之光:$refs
:
<body> <div id="app"> <mxc></mxc> <mxc></mxc> <mxc ref="aaa"></mxc> <button @click="btnClick">顫抖吧</button> </div> <template id="mxc"> <div>我是子組件啊</div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, methods:{ btnClick(){ console.log(this.$refs) console.log(this.$refs.aaa) } }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是子組件的name' } }, methods:{ showMessage(){ console.log('mxcnb') } } } } }) </script> </body>
點(diǎn)擊(父組件)按鈕之后:
為什么叫“DOM之光”呢?因?yàn)樗驮鶭S中的
document.querySelector('xxx')
功能一樣,它可以在vue中獲取元素/匹配組件
子訪問父:$parent
<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div>我是子組件啊</div> <button @click="btnClick">更加顫抖的child</button> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, components:{ mxc:{ template:'#mxc', methods:{ btnClick(){ console.log(this.$parent) } } } } }) </script> </body>
如法炮制:
圖中el屬性在有些瀏覽器(或添加了vue插件)會顯示未Vue?
因?yàn)楫?dāng)前子組件的父組件就是vue實(shí)例啊!
(但是在實(shí)際中$parent
用的非常少——考慮到耦合度的原因)
子組件訪問根組件:$root
<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div> <div>我是mxc組件</div> <cdn></cdn> </div> </template> <template id="mxca"> <div> <div>我是子子組件啊</div> <button @click="btnClick">巨顫祖child</button> </div> </template> <script> const app=new Vue({ el:'#app', data:{ message:'你好' }, components:{ mxc:{ template:'#mxc', data(){ return{ name:'我是中間子組件的name' } }, components:{ cdn:{ template:'#mxca', methods:{ btnClick(){ console.log(this.$parent.name) console.log(this.$root.message) } } } } } } }) </script> </body>
總結(jié)
到此這篇關(guān)于vue父子組件間引用:$parent、$children的文章就介紹到這了,更多相關(guān)vue父子組件間引用:$parent、$children內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁面,意味著很多頁面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下2019-06-06Vue如何基于vue-i18n實(shí)現(xiàn)多國語言兼容
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國語言兼容,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07如何利用Vue3+Element?Plus實(shí)現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單
標(biāo)簽頁一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級菜單或者二級菜單時(shí),可以增加對應(yīng)的標(biāo)簽頁,當(dāng)你點(diǎn)擊對應(yīng)的標(biāo)簽頁,可以觸發(fā)對應(yīng)的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動態(tài)標(biāo)簽頁及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例
本篇文章主要介紹了vue用addRoutes實(shí)現(xiàn)動態(tài)路由的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09使用VueRouter的addRoutes方法實(shí)現(xiàn)動態(tài)添加用戶的權(quán)限路由
這篇文章主要介紹了使用VueRouter的addRoutes方法實(shí)現(xiàn)動態(tài)添加用戶的權(quán)限路由,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06