一个前端er~

0%

vue实例属性

发表于 更新于 分类于
本文字数： 1.9k 阅读时长 ≈ 2 分钟

vm.$data

  • 类型: Object
  • 详细:
    Vue 实例观察的数据对象. Vue 实例代理了对其 data 对象属性的访问

vm.$props

  • 类型: Object
  • 详细:
    当前组件接受到的 props 对象. Vue 实例代理了对其 props 对象属性的访问

vm.$el

  • 类型: Elemnt
  • 只读
  • 详细:
    Vue 实例使用的根 DOM 元素

vm.$options

  • 类型: Object
  • 只读
  • 详细:
    用于当前 Vue 实例的初始化选项. 需要在选项中包含自定义属性时会有用处
    1
    2
    3
    4
    5
    6
    new Vue({
      customOption: 'foo',
      created: function() {
        console.log(this.$options.customOption) // => foo
      }
    })

vm.$parent

  • 类型: Vue instance
  • 只读
  • 详细:
    父实例

vm.$root

  • 类型: Vue instance
  • 只读
  • 详细:
    当前组件树的根 Vue 实例. 如果当前实例没有父实例, 此实例将会是其自己.

vm.$children

  • 类型: Array
  • 只读
  • 详细:
    当前实例的直接子组件. 不保证顺序, 也不是响应式的

vm.$slots

  • 类型: { [name: string]: ?Array}

  • 只读

  • 详细:
    用来访问被插槽分发的内容. 每个具名插槽有其相应的属性.

  • 示例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    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', hdaer)
          createElement('main', body)
          createElement('footer', footer)
        ])
      }
    )

vm.$scopedSlots

  • 类型: { [name: string]: props => Array | undefined }

  • 只读

  • 详细:
    用来访问作用域插槽. 对于包括默认 slot 在内的每一个插槽. 该对象都包含一个返回相应 VNode 的函数

  • 注意:
    作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。

    所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

vm.$refs

  • 类型: Object
  • 只读
  • 详细:
    一个对象, 持有注册过 ref 特性的所有 DOM 元素和组件实例

vm.$isServer

  • 类型: boolean
  • 只读
  • 详细:
    当前 Vue 实例是否运行于服务器

vm.$attrs

  • 类型: { [key: string]: string}
  • 只读
  • 详细:
    包含了父作用域中不作为 prop 被识别的特性绑定(class和style除外). 当一个组件没有声明任何 prop 时, 这里会包含所有父作用域的绑定, 并且可以通过 v-bind="$attrs 传入内部组件

vm.$listeners

  • 类型: { [key: string]: Function | Array }
  • 只读
  • 详细:
    包含了父作用域中v-on事件监听器, 他可以通过v-on=$listeners传入内部组件
请作者喝杯咖啡