實(shí)例詳解vue中的$root和$parent
更新時(shí)間：2019年04月29日 15:46:48 作者：狂奔的蝸牛0828
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
$root
vue狀態(tài)管理使用vuex,如果項(xiàng)目不大，邏輯不多，name我們沒必要用vuex給項(xiàng)目增加難度，只需要用$root設(shè)置vue實(shí)例的data就行了，如下
main.js
new Vue({
data(){
return{
loading:true
}
},
router,
store,
render: h => h(App)
}).$mount('#app')
a.vue
created(){
console.log(this.$root.loading) //獲取loading的值
}
b.vue
created(){
this.$root.loading = false; //設(shè)置loading的屬性
}
$parent
parent能夠訪問父組件的屬性和方法
parent.vue
<template>
<div>
<child>
</child>
</div>
</template>
<script>
import child from './child';
export default {
components:{
child
},
data(){
return {
text:"測(cè)試"
}
},
}
</script>
child.vue
<template>
<div>
<child>
</child>
</div>
</template>
<script>
import child from './child';
export default {
created(){
console.log(this.$parent.text)//測(cè)試（能夠獲取到父組件的屬性和方法）
}
}
</script>
$refs
總結(jié)
以上所述是小編給大家介紹的vue中的$root,$parent，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
您可能感興趣的文章:
相關(guān)文章
vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作教程
在Vue中可以使用異步函數(shù)和await關(guān)鍵字來(lái)控制上一步執(zhí)行完再執(zhí)行下一步,這篇文章主要給大家介紹了關(guān)于vue?async?await?promise等待異步接口執(zhí)行完畢再進(jìn)行下步操作的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue時(shí)間轉(zhuǎn)換的幾種方式,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue中使用render封裝一個(gè)select組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文將通過示例為大家詳細(xì)講講雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2022-09-09
這篇文章主要介紹了通過原生vue添加滾動(dòng)加載更多功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
vue3中v-for報(bào)錯(cuò)'item'is?of?type'unknown'的
在寫vue3+ts的項(xiàng)目,得到一個(gè)數(shù)組,需要循環(huán)展示,使用v-for循環(huán),寫完之后發(fā)現(xiàn)有個(gè)報(bào)錯(cuò),接下來(lái)通過本文給大家介紹vue3中v-for報(bào)錯(cuò)?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11
Vue使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實(shí)現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02
js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場(chǎng)景,以及在vue中節(jié)流防抖的具體實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例
本篇文章主要介紹了Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動(dòng)畫的示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
Vue使用wangEditor實(shí)現(xiàn)自定義粘貼功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用wangEditor實(shí)現(xiàn)自定義粘貼功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12