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.fzitv.net/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)文章
關(guān)于vue中媒體查詢(xún)不起效的原因總結(jié)
這篇文章主要介紹了關(guān)于vue中媒體查詢(xún)不起效的原因總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說(shuō)在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡(jiǎn)單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下2024-05-05
這篇文章主要為大家介紹了Vue3源碼解析watch函數(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要來(lái)和大家一起探討一下在Vue3項(xiàng)目中如何處理重復(fù)渲染代碼的問(wèn)題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Element-Plus?el-col、el-row快速布局及使用方法
這篇文章主要介紹了Element-Plus?el-col、el-row快速布局及使用方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例，本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果
本文主要介紹了Element樹(shù)形控件el-tree懶加載并設(shè)置默認(rèn)展開(kāi)和選中的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟
最近接了個(gè)小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會(huì)出現(xiàn)一些小問(wèn)題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下2023-10-10
5個(gè)可以加速開(kāi)發(fā)的VueUse函數(shù)庫(kù)(小結(jié))
VueUse為Vue開(kāi)發(fā)人員提供了大量適用于Vue2和Vue3的基本Composition API 實(shí)用程序函數(shù)。具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11