vue - $root,$parent,$children,$ref的用法

$root，$parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过root访问得到的是根组件。

$parent

$parent在子组件中调用父组件的方法跟data里设置的数据

 

父组件

data() {
    return {
      parent: 1,
    };
  },


 methods: {
    //父组件的方法
    add() {
      this.parent = this.parent + 1;
    }

  },

子组件

 mounted() {
    console.log(this.$parent.parent)    //直接通过this.$parent.parent得到父组件里的值  也可以通过该方法去调用里面的方法
  },
  methods: {  
    add() {
      this.$parent.add();              //子组件里调用父组件的方法更改值
    }
  },

$children

　他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

 

$ref

 

 <!-- 这是一个组件 -->
  <zi ref="one"></zi>


//js

 console.log(this.$refs.one.child);  //获取子组件的值  同法可以调用子组件的方法