Vue中$root的使用方法及注意事項(xiàng)
前言
在 Vue 中, $root
是一個(gè)屬性,用于訪問根組件實(shí)例。它的作用是連接所有其他的 Vue 實(shí)例組件,并向子組件提供全局配置和實(shí)例方法。根實(shí)例是 Vue 的上下文環(huán)境,包含了整個(gè) Vue 應(yīng)用的數(shù)據(jù)和方法。使用$root屬性,可以方便地訪問根實(shí)例的方法、數(shù)據(jù)和生命周期鉤子函數(shù)。
$root的使用示例
// main.js new Vue({ data() { return { isUpdate: true }; }, router, store, render: h => h(App) }).$mount('#app'); // 組件 created() 或mounted(), method中 created() { console.log(this.$root.isUpdate); this.$root.isUpdate = false; }
在上面的代碼中,首先在main.js
文件中創(chuàng)建了一個(gè)新的 Vue 實(shí)例,并在data函數(shù)中定義了一個(gè)名為isUpdate的屬性,初始值為true。然后,在組件的created生命周期鉤子函數(shù)中,通過this.$root.isUpdate
來訪問根組件的isUpdate屬性,并將其值打印到控制臺。接下來,通過this.$root.isUpdate = false
將根組件的isUpdate屬性的值設(shè)置為false。
使用$root時(shí)注意事項(xiàng)
1, $root
只對根組件有用,用于訪問根組件中的屬性或方法,而不是父組件。
2,如果存在多級子組件,通過$root
訪問得到的是根父組件。
附:$root 訪問根組件中的屬性或方法
- 注意:是根組件,不是父組件。
$root
只對根組件有用。
this.$root.genMethod();//genMethod()是根組件中的方法名 this.$root.genName;//genName是根組件data中的屬性名
- 完整示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>$root訪問根組件中的屬性或方法</title> </head> <body> <div id="app"> <com1></com1> </div> <script> var vm = new Vue({ el: "#app", data() { return { rootInfo:"我是根元素的屬性" } }, methods: { alerts() { alert(111) } }, components: { com1: { data() { return { info: "組件1" } }, template: "<p>{{ info }} <com2></com2></p>", components: { com2: { template: "<p>我是組件1的子組件</p>", created() { this.$root.alerts()//111 console.log(this.$root.rootInfo)//我是根元素的屬性 } } } } } }); </script> </body> </html>
總結(jié)
到此這篇關(guān)于Vue中$root的使用方法及注意事項(xiàng)的文章就介紹到這了,更多相關(guān)Vue中$root用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能(實(shí)現(xiàn)思路)
其實(shí)想要實(shí)現(xiàn)功能很簡單,就是在一張圖片上監(jiān)聽鼠標(biāo)滑輪滾動(dòng)的事件,然后根據(jù)上滾還是下滾實(shí)現(xiàn)圖片的縮放,這篇文章主要介紹了Vue?實(shí)現(xiàn)圖片監(jiān)聽鼠標(biāo)滑輪滾動(dòng)實(shí)現(xiàn)圖片縮小放大功能,需要的朋友可以參考下2023-03-03利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁特效,幾乎所有的網(wǎng)站或多或少都會用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-08-08vue項(xiàng)目首次打開時(shí)加載速度很慢的優(yōu)化過程
這篇文章主要介紹了vue項(xiàng)目首次打開時(shí)加載速度很慢的優(yōu)化過程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue中uni-app 實(shí)現(xiàn)小程序登錄注冊功能
這篇文章主要介紹了uni-app 實(shí)現(xiàn)小程序登錄注冊功能,文中給大家介紹了實(shí)現(xiàn)思路,以及vuex和本地緩存的區(qū)別,需要的朋友可以參考下2019-10-10