vue組件 $children,$refs，$parent的使用詳解
本文介紹了vue組件 $children,$refs，$parent的使用，分享給大家，也自己留個(gè)筆記
如果項(xiàng)目很大，組件很多，怎么樣才能準(zhǔn)確的、快速的尋找到我們想要的組件了？？
1）$refs
首先你的給子組件做標(biāo)記。demo ：<firstchild ref="one"></firstchild>
然后在父組件中，通過(guò)this.$refs.one就可以訪問(wèn)了這個(gè)自組件了，包括訪問(wèn)自組件的data里面的數(shù)據(jù)，調(diào)用它的函數(shù)
2）$children
他返回的是一個(gè)組件集合，如果你能清楚的知道子組件的順序，你也可以使用下標(biāo)來(lái)操作；
for(let i=0;i<this.$children.length;i++){
console.log(this.$children[i].msg);輸出子組件的msg數(shù)據(jù)；
}
接下來(lái)就給一個(gè)長(zhǎng)一點(diǎn)的deno
首先定義一個(gè)父組件：parentcomponent，
在父組件中我又是使用了兩個(gè)自組件（假如有一百個(gè)自組件）[明確一點(diǎn)，組件只能有一個(gè)根節(jié)點(diǎn)]，根節(jié)點(diǎn)是啥，我不知道。。。。。。
<template id="parentcomponent">
<div >
<p>this is a parent-component</p>
<firstchild ref="f1"></firstchild>
<secondchild ref="f2"></secondchild>
<button @click='show_child_of_parents'>show child msg</button>
</div>
</template>
分別給出兩個(gè)字組件的定義：（第2個(gè)使用的是template,第1個(gè)是script）
<script type="text/x-template" id="childOne">
<div>
<p>this is first child</p>
//使用stop阻止默認(rèn)事件（vue的事件處理機(jī)制）
<button @click.stop='getParent'>get parent msg</button>
</div>
</script>
<template id="childSec">
<div>
<p>this is second child</p>
</div>
</template>
組件模板定義好了，就是用：
1）掛在元素：
<script>
new Vue({
el:"#app",
data:{},
components:{
"parent-component":{
template:'#parentcomponent',
data(){
return{msg:'這是父組件中的內(nèi)容'}
},
methods:{
show_child_of_parents(){
//children方式訪問(wèn)自組件
for(let i=0;i<this.$children.length;i++){
console.log(this.$children[i].msg);
}
//通過(guò)$ref打標(biāo)記，訪問(wèn)子組件
console.log(this.$refs.f1.msg);
this.$refs.f1.getParent();
},
},
components:{
'firstchild':{
template:'#childOne',
data(){
return {msg:'這是第一個(gè)子組件'};
},
methods:{
getParent(){
let a=1;
console.log(a);
alert(this.$parent.msg);
}
},
},
'secondchild':{
template:'#childSec',
data(){
return {msg:"這是第二個(gè)組件"};
}
}
}
}
}
});
</script>
2)使用父組件了
<body>
<p><strong>可以通過(guò)$refs訪問(wèn)父組件的子組件</strong></p>
<div id="app">
<parent-component></parent-component>
</div>
</body>
值得注意的是vue2,相比vue1,丟棄了一些東西。。。。、http://www.dbjr.com.cn/article/93467.htm
總結(jié)一下：
1）組件只能一個(gè)根節(jié)點(diǎn)
2）可以在自組件中使用this.$parent.屬性值，或者函數(shù)
3）在父組件中可以使用this.$refs.組件的標(biāo)記 訪問(wèn)子組件，或者this.$children[i].屬性，，訪問(wèn)子組件的
4）你需要注意this的指向
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文介紹了如何開發(fā)自定義全局公共組件的兩種方法,第一種方法是通過(guò)在components文件夾中創(chuàng)建新的組件文件夾,例如Loading文件夾,并在其中創(chuàng)建index.js和index.vue文件,通過(guò)在vue的入口文件main.js中進(jìn)行引入,可以實(shí)現(xiàn)組件的全局調(diào)用2024-10-10
vue計(jì)算屬性想要傳入?yún)?shù)如何解決
這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Prop的基本用法很簡(jiǎn)單，只需要在子組件的Vue實(shí)例中定義該屬性并把值設(shè)為目標(biāo)屬性的數(shù)組即可。這篇文章主要介紹了Vue中的Prop ,需要的朋友可以參考下2018-06-06
vue前端如何將任意文件轉(zhuǎn)為base64傳給后端
這篇文章主要介紹了vue前端如何將任意文件轉(zhuǎn)為base64傳給后端問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue?cli?局部混入mixin和全局混入mixin的過(guò)程
這篇文章主要介紹了vue?cli?局部混入mixin和全局混入mixin的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了element-ui 彈窗組件封裝的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式
這篇文章主要介紹了iview中實(shí)現(xiàn)this.$Modal.confirm自定義彈出框換行加樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue.js實(shí)現(xiàn)可配置的登錄表單代碼詳解
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可配置的登錄表單實(shí)例代碼詳解，文中給大家補(bǔ)充介紹了vue.js 全選與取消全選的實(shí)例代碼,需要的朋友可以參考下2018-03-03
Vue實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案
文章主要討論了在 Vue 開發(fā)中實(shí)現(xiàn)頁(yè)面返回停留原位置的多種方案,包括 Vuex、keep-alive、v-show、客戶端跳轉(zhuǎn)等,并分別闡述了它們的優(yōu)缺點(diǎn)和適用情況,強(qiáng)調(diào)開發(fā)前應(yīng)周全考慮前端業(yè)務(wù)和用戶體驗(yàn),根據(jù)實(shí)際業(yè)務(wù)選擇合適方案,需要的朋友可以參考下2025-03-03
vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過(guò)濾功能，需要的朋友可以參考下2022-04-04