Vue $root 的用法

猕猴桃-HR

于 2021-12-27 18:19:07 发布

阅读量3.2k

点赞数

分类专栏： vue 文章标签： Vue $root 根组件父子通信组件间通信

本文链接：https://blog.csdn.net/weixin_45677987/article/details/122177933

版权

vue 专栏收录该内容

105 篇文章

订阅专栏

本文介绍了Vue中$root的使用方法，重点讲解了如何通过$root访问根组件的属性和方法，并通过实例展示了在组件间的父子通信中$root与$parent、$ref的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 中$root 的用法: 
 $root用法:
  作用:  访问跟组件的属性和方法: 
  $root 只是对跟组件有用,  不是父组件, $root 只是对对跟组件有用。
<!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>

访问父组件的属性或方法 this.$parent;
访问子组件的属性或方法 this.$ref;