Vue实例上的属性

vm.$data
vm.$props
vm.$el
vm.$refs
vm.$options
vm.$parent
vm.$children
vm.$root
vm.$slots
vm.$scopedSlots
vm.$isServer
vm.$attrs
vm.$listeners

1 vm.$data

Vue实例察看的数据对象。Vue实例代理了对其property的拜访
包含mixin和extend的data

2 vm.$props

以后组件接管到的props对象。Vue实例代理了对其property的拜访

3 vm.$el

Vue实例应用的根DOM元素

4 vm.$refs

持有注册过ref的所有DOM元素和组件实例
组件外部有ref的DOM拜访不到

5 vm.$options

以后Vue实例的初始化选项
能够通过vm.$options去拜访自定义的属性

6 vm.$root

以后组件树的根Vue实例，若以后实例没有父实例，此实例将是其本人。

7 vm.$parent vm.$children

返回以后实例的父实例与间接子组件
$chidren并不保障程序，也不是响应式的

8 vm.$slots

拜访被插槽散发的内容，非响应式
返回一个对象，蕴含插槽的Vnode数组

//父组件<template>  <div id="app">    <Child>      <template v-slot:slot1> 具名1 </template>      <template v-slot:slot2>        <span>具名2</span>        <span>具名2</span>      </template>      <span>默认</span>    </Child>  </div></template>//子组件<template>  <div>    <slot></slot>    <slot name="slot1"></slot>    <slot name="slot2"></slot>  </div></template><script>export default {  mounted() {    console.log(this.$slots);  },};</script>

9 vm.$scopedSlots

能够拜访作用域插槽，以及默认插槽和具名插槽。
返回一个对象，插槽为函数模式，返回Vnode数组

//子组件<template>  <div>    <slot></slot>    <slot name="slot1"></slot>    <slot name="slot2"></slot>    <slot name="slot3" :list="list"></slot>  </div></template><script>export default {  data() {    return {      list: ["a", "b", "c"],    };  },  mounted() {    console.log(this.$slots);    console.log(this.$scopedSlots);  },};</script>//父组件<template>  <div id="app">    <Child>      <template v-slot:slot1> 具名1 </template>      <template v-slot:slot2> 具名2 </template>      <span>默认</span>      <template v-slot:slot3="{ list }">        <span v-for="(item, index) in list" :key="index">{{ item }}</span>      </template>    </Child>  </div></template>

如果拜访slot3，this.$scopedSlots.slot3()会返回undefined，v-for生成的标签拜访不到

10 vm.$isServer

布尔值
以后Vue实例是否运行于服务器
服务端渲染(SSR)

11 vm.$attrs

蕴含父作用域中不作为prop被辨认的attribute绑定。
当一个组件没有申明任何prop时，蕴含所有父作用域的绑定，并且通过v-bind="$attrs"传入外部组件

//父组件 - 失常传递数据<template>  <div id="app">    <Child :msg="msg"> </Child>  </div></template><script>import Child from "./components/Child.vue";export default {  name: "App",  data() {    return {      msg: "张三",    };  },  components: {    Child,  },};</script>//子组件 - 未应用props接管 v-bind="$attrs"向下传递<template>  <div>    <Grandson v-bind="$attrs" />  </div></template><script>import Grandson from "./Grandson.vue";export default {  components: {    Grandson,  },};</script>//孙组件 能够应用props接管到祖组件传递的数据<template>  <div>{{ msg }}</div></template><script>export default {  props: ["msg"],};</script>

在中间层应用v-bind="$attrs"能够实现祖孙组件的数据通信
应用inheritAttrs选项来确认是否继承所有父组件的内容
在子与孙组件中应用vm.$attrs能够拜访传递的数据

12 vm.$listeners

蕴含父作用域中(不含.native润饰的) v-on事件监听器
能够通过v-on="$listeners"传入外部组件

//父组件 - 失常的绑定一个事件<template>  <div id="app">    <Child @todo="show"> </Child>  </div></template><script>import Child from "./components/Child.vue";export default {  name: "App",  components: {    Child,  },  methods: {    show() {      console.log(this);    },  },};</script>//子组件 未触发事件，通过v-on="$listeners"向下传递<template>  <div>    <Grandson v-on="$listeners" />  </div></template><script>import Grandson from "./Grandson.vue";export default {  components: {    Grandson,  },};</script>//孙组件 触发事件<template>  <div>    <input type="button" value="show" @click="$listeners.todo" />  </div></template>

能够在孙组件中传递数据，在祖组件中解决
在子与孙组件中能够应用vm.$listeners拜访监听的事件