Vue组件的6个常用属性

在 Vue.js 中，给组件对象定义了很多属性，比较常用的有 $data、$props、$parent、$root、$children 和 $refs 等属性。Vue.js 组件对象的属性都是以 $ 为前缀的，用来区分定义在组件里面的数据属性。

这些属性的作用分别如下：

• $data：获取 Vue.js 组件的数据属性对象，包含自定义的所有数据属性。
• $props：获取 Vue.js 组件的 props 属性对象，包含所有的 prop 属性。
• $parent：获取 Vue.js 组件对象的父组件。
• $root：获取 Vue.js 组件对象的根对象，否则就是自己。
• $children：获取 Vue.js 组件对象的所有子组件数组。
• $refs：获取组件对象里面的所有 ref 组件数组，可以根据 ref 名称获取指定的子组件。

这些组件属性的使用，参见如下代码：

<div id="app"> 
  <son1></son1> 
  <hr> 
  <son2 ref="secondSon"></son2> 
  <br/> 
  <button v-on:click="toTest">parent test</button> 
</div> 
 
<template id="sonTemplate"> 
  <div> 
    name: {{ name }} --- value: {{ value }}<br/> 
    <button v-on:click="toTest">Test</button> 
  </div> 
</template> 
 
<script type="text/javascript"> 
const Son1 = { 
  name: 'Son1', 
  template: '#sonTemplate', 
  data() { 
    return { 
      name: 'son1', 
      value: 'value1' 
    }; 
  }, 
  methods: { 
    toTest() { 
      console.log(this.$parent.$data.value); 
    } 
  } 
}; 
 
const Son2 = { 
  name: 'Son2', 
  template: '#sonTemplate', 
  data() { 
    return { 
      name: 'son2', 
      value: 'value2' 
    }; 
  }, 
  methods: { 
    toTest() { 
      console.log(this.$parent.$data.value); 
    } 
  } 
}; 
 
const vm = new Vue({ 
  el: '#app', 
  components: { 
    Son1, 
    Son2 
  }, 
  data: { 
    value: 'parentValue' 
  }, 
  methods: { 
    toTest() { 
      this.$children.forEach(element => { 
        console.log(element.$data.name + ',,,,' + element.$data.value); 
      }); 
      console.log(this.$refs.secondSon.$data.value); 
    } 
  }
}); 
</script>