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