快捷導(dǎo)航

Vue中$root的使用方法及注意事項(xiàng)

更新時(shí)間：2024年03月14日 11:13:21 作者：還是大劍師蘭特

這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來(lái)訪問(wèn)根組件的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 Vue 中， $root是一個(gè)屬性，用于訪問(wèn)根組件實(shí)例。它的作用是連接所有其他的 Vue 實(shí)例組件，并向子組件提供全局配置和實(shí)例方法。根實(shí)例是 Vue 的上下文環(huán)境，包含了整個(gè) Vue 應(yīng)用的數(shù)據(jù)和方法。使用$root屬性，可以方便地訪問(wèn)根實(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ù)中，通過(guò)this.$root.isUpdate來(lái)訪問(wèn)根組件的isUpdate屬性，并將其值打印到控制臺(tái)。接下來(lái)，通過(guò)this.$root.isUpdate = false將根組件的isUpdate屬性的值設(shè)置為false。

使用$root時(shí)注意事項(xiàng)

1， $root只對(duì)根組件有用，用于訪問(wèn)根組件中的屬性或方法，而不是父組件。

2，如果存在多級(jí)子組件，通過(guò)$root訪問(wèn)得到的是根父組件。

附：$root 訪問(wèn)根組件中的屬性或方法

注意：是根組件，不是父組件。$root只對(duì)根組件有用。

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訪問(wèn)根組件中的屬性或方法</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>