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