Vue中$root的使用方法及注意事項

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

這篇文章主要給大家介紹了關于Vue中$root使用方法及注意事項的相關資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在 Vue 中， $root是一個屬性，用于訪問根組件實例。它的作用是連接所有其他的 Vue 實例組件，并向子組件提供全局配置和實例方法。根實例是 Vue 的上下文環(huán)境，包含了整個 Vue 應用的數(shù)據(jù)和方法。使用$root屬性，可以方便地訪問根實例的方法、數(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)建了一個新的 Vue 實例，并在data函數(shù)中定義了一個名為isUpdate的屬性，初始值為true。然后，在組件的created生命周期鉤子函數(shù)中，通過this.$root.isUpdate來訪問根組件的isUpdate屬性，并將其值打印到控制臺。接下來，通過this.$root.isUpdate = false將根組件的isUpdate屬性的值設置為false。

使用$root時注意事項

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>