實例詳解vue中的$root和$parent
更新時間：2019年04月29日 15:46:48 作者：狂奔的蝸牛0828
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
$root
vue狀態(tài)管理使用vuex,如果項目不大，邏輯不多，name我們沒必要用vuex給項目增加難度，只需要用$root設(shè)置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; //設(shè)置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，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)可復(fù)用輪播組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vxe-table 是一個功能強大的 Vue 表格組件,它支持虛擬滾動列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動列表功能的使用場景和優(yōu)勢,感興趣的可以了解下2023-12-12
這篇文章主要介紹了vue工程全局設(shè)置ajax的等待動效的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue3 實現(xiàn)雙盒子定位Overlay的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得
這篇文章主要介紹了詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了關(guān)于vant的時間選擇器使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue動態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解
這篇文章主要介紹了vue中{{}},v-text和v-html區(qū)別與應(yīng)用詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue實現(xiàn)一個矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
Vue3純前端實現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-05-05