乐趣区

关于vue.js:vueVue实例上的属性

jiezi

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 拜访监听的事件

退出移动版