【vue】Vue实例上的属性

Vue实例上的属性

1. vm.$data
2. vm.$props
3. vm.$el
4. vm.$refs
5. vm.$options
6. vm.$parent
7. vm.$children
8. vm.$root
9. vm.$slots
10. vm.$scopedSlots
11. vm.$isServer
12. vm.$attrs
13. 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访问监听的事件