vue父子組件間引用之$parent、$children
vue中提到【父子組件】，則一定會想到我們常用的父子組件通信：props+$on()、$emit() ，如圖：
也就是說，雖然在一般情況下，子組件是不能引用父組件或者Vue實例的數(shù)據(jù)，但是對于在開發(fā)中出現(xiàn)的“數(shù)據(jù)需要在組件中來回傳遞”，我們最簡單的解決辦法就是通過props（和v-on）將數(shù)據(jù)從父組件傳到子組件，再用$emit將數(shù)據(jù)從子組件傳到父組件，以此循環(huán)引用。
但是在另一些場景下，我們可能想要比如（在父組件中）拿到子組件對象，然后直接操作其中數(shù)據(jù)，去實現(xiàn)一些功能，比如方法的調(diào)用。
有時候我們需要父組件直接訪問子組件、子組件直接訪問父組件，或者子組件訪問根組件：
- 父組件訪問子組件：使用
$children或$refsreference - 子組件訪問父組件：使用
$parent
父子組件的訪問方式之：$children
children很特別，查閱資料可以發(fā)現(xiàn)：this.$children是一個數(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>
點擊（父組件）按鈕之后：
我們還可以通過循環(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>
點擊（父組件）按鈕之后：
因為是數(shù)組，所以我們可以通過比如：this.$children[2]來拿到第三個子組件的數(shù)據(jù)。
但是這么做有一個問題：比如開發(fā)時突然在這三個子組件中又插入了一個子組件（可能相同，也可能不同），這時候【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>
點擊（父組件）按鈕之后：
為什么叫“DOM之光”呢？因為它和原生JS中的
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？
因為當前子組件的父組件就是vue實例?。?/p>
（但是在實際中$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é)
到此這篇關于vue父子組件間引用：$parent、$children的文章就介紹到這了,更多相關vue父子組件間引用：$parent、$children內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
keep-alive是Vue中一個非常有用的特性,它可以幫助我們避免重復渲染和減少組件的渲染次數(shù),從而提高應用程序的性能,本文給大家介紹keep-alive組件緩存的相關知識,感興趣的朋友一起看看吧2024-01-01
大家應該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關資料,需要的朋友可以參考下2021-09-09
vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實現(xiàn)自定義拖拽布局方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要介紹了Vue-Router進階之滾動行為詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue-cli webpack 開發(fā)環(huán)境跨域詳解
本篇文章主要介紹了vue-cli webpack 開發(fā)環(huán)境跨域詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
最近被問起是否了解vue的插槽（slot），咋一想發(fā)現(xiàn)，似乎很少用到這玩意。所以整理了下slot的一些用法2022-08-08
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
vue3中使用viewerjs實現(xiàn)圖片預覽效果的項目實踐
viewer.js是一款開源的圖片預覽插件,功能十分強大,本文主要介紹了vue3中使用viewerjs實現(xiàn)圖片預覽效果的項目實踐,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了Vue前端框架搭建過程，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
基于vue-router的matched實現(xiàn)面包屑功能
本文主要介紹了基于vue-router的matched實現(xiàn)面包屑功能，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09