Vue杂谈 $的用法

我们已经可以从Vue官网的api之中得到许多有关Vue$的用法，在这里将对部分$的用法进行说明。

下面附上Vue官网的api：

API — Vue.js (vuejs.org)https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property

实例property中的$：

vm.$data:

解释：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。也就是说你可以用vm.$data的方式访问Vue实例之中的数据。

vm.$el:

Vue 实例使用的根 DOM 元素。

var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

vm.$parent、vm.$root、vm.$children:

vm.$parent指的是Vue组件的父实例；

vm.$root指的是当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己；

vm.$children指的是Vue组件的子实例；

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

vm.refs:

详解可参考下篇：

Vue里ref($refs)的用法

一个对象，持有注册过ref attribute的所有 DOM 元素和组件实例。

<div id="app">
  <p type="text" ref="input"/>
</div>

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input.value ="test"; 
    }
  }
})
</script>

特别的，我们可以自己新增一个$的引用，但不是通过传入 new Vue，而是通过手动赋值：Vue.prototype.$xxx= xxx
比如最常见的 Vue.prototype.$http = axios