Vue实例属性为开发者提供了访问组件内部状态的方法

在Vue.js中，$root属性用于访问应用的根实例。此属性允许从任何子组件内访问到最顶层的Vue实例。

// 创建Vue实例作为根实例
var app = new Vue({
    data: {
        message: 'Hello Vue!'
    },
    methods: {
        showMessage: function () {
            console.log(this.message);
        }
    }
});

当需要在一个子组件里调用根实例的方法时，可以通过this.$root来实现：

// 定义一个子组件并尝试调用根实例的方法
Vue.component('child-component', {
    created: function () {
        this.$root.showMessage(); // 调用了根实例里的showMessage方法，会打印 "Hello Vue!"
    }
});

注意：仅能在非根级别的组件内部使用$root属性去引用根实例；对于根级自身而言，则直接就是那个唯一的Vue实例。

Vue实例属性为开发者提供了访问组件内部状态的方法。下面列出几个重要的实例属性及其用途：

1. vm.$data 是Vue实例观察的数据对象。该对象上的所有属性都可以通过代理直接从Vue实例上读取或写入

new Vue({
  data: {
    message: 'Hello!'
  }
})
console.log(vm.message); // Hello!

2. 如果当前实例有一个父级实例，则可以通过只读属性vm.$parent来访问它

3. 自Vue版本2.2.0起新增加了vm.$props 。这是一个表示当前接收到的prop的对象。类似于数据对象，对这个对象中的属性也可以直接由Vue实例进行存取操作

4. 只读属性vm.$options保存着创建时传递给构造器的选项。这允许我们在运行期间查看配置信息以及自定义添加到选项里的任意字段

5. 属性vm.$refs是一个包含DOM元素和子组件实例的对象，这些元素与ref特性关联。注意此属性同样具有只读性质

Instance Properties
vm.$data

Type: Object

Details:

The data object that the Vue instance is observing. The Vue instance proxies access to the properties on its data object.

See also: Options / Data - data

vm.$props

New in 2.2.0+

Type: Object

Details:

An object representing the current props a component has received. The Vue instance proxies access to the properties on its props object.

vm.$el

Type: Element

Read only

Details:

The root DOM element that the Vue instance is managing.

vm.$options

Type: Object

Read only

Details:

The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options:

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

vm.$parent

Type: Vue instance

Read only

Details:

The parent instance, if the current instance has one.

vm.$root

Type: Vue instance

Read only

Details:

The root Vue instance of the current component tree. If the current instance has no parents this value will be itself.

vm.$children

Type: Array<Vue instance>

Read only

Details:

The direct child components of the current instance. Note there’s no order guarantee for $children, and it is not reactive. If you find yourself trying to use $children for data binding, consider using an Array and v-for to generate child components, and use the Array as the source of truth.

vm.$slots

Type: { [name: string]: ?Array<VNode> }

Read only

Details:

Used to programmatically access content distributed by slots. Each named slot has its own corresponding property (e.g. the contents of v-slot:foo will be found at vm.$slots.foo). The default property contains either nodes not included in a named slot or contents of v-slot:default.

Note: v-slot:foo is supported in v2.6+. For older versions, you can use the deprecated syntax.

Accessing vm.$slots is most useful when writing a component with a render function.

Example:

<blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>

  <template v-slot:footer>
    <p>Copyright 2016 Evan You</p>
  </template>

  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

See also:
    <slot> Component
    Content Distribution with Slots
    Render Functions - Slots

vm.$scopedSlots

New in 2.1.0+

Type: { [name: string]: props => Array<VNode> | undefined }

Read only

Details:

Used to programmatically access scoped slots. For each slot, including the default one, the object contains a corresponding function that returns VNodes.

Accessing vm.$scopedSlots is most useful when writing a component with a render function.

Note: since 2.6.0+, there are two notable changes to this property:

    Scoped slot functions are now guaranteed to return an array of VNodes, unless the return value is invalid, in which case the function will return undefined.

    All $slots are now also exposed on $scopedSlots as functions. If you work with render functions, it is now recommended to always access slots via $scopedSlots, whether they currently use a scope or not. This will not only make future refactors to add a scope simpler, but also ease your eventual migration to Vue 3, where all slots will be functions.

See also:
    <slot> Component
    Scoped Slots
    Render Functions - Slots

vm.$refs

Type: Object

Read only

Details:

An object of DOM elements and component instances, registered with ref attributes.

See also:
    Child Component Refs
    Special Attributes - ref

vm.$isServer

Type: boolean

Read only

Details:

Whether the current Vue instance is running on the server.

See also: Server-Side Rendering

vm.$attrs

New in 2.4.0+

Type: { [key: string]: string }

Read only

Details:

Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.

vm.$listeners

New in 2.4.0+

Type: { [key: string]: Function | Array<Function> }

Read only

Details:

Contains parent-scope v-on event listeners (without .native modifiers). This can be passed down to an inner component via v-on="$listeners" - useful when creating transparent wrapper components.