9. Vue实例的属性property

257 阅读2分钟

image.png

image.png image.png

1. vm.$data—— Vue 实例观察的数据对象

  • 类型Object

  • 详细

    Vue 实例观察的数据对象。Vue 实例代理了对实例本身 data 对象 property 的访问。

    image.png

    image.png image.png

  • 参考选项 / 数据 - data

2. vm.$props——当前组件接收到的 props 对象

  • 类型Object

  • 详细

    当前组件接收到的 props 对象。Vue 实例代理了对实例本身 props 对象 property 的访问。

    image.png

    image.png

3.vm.$el—— Vue 实例使用的根 DOM 元素

  • 类型Element

  • 只读

  • 详细

    Vue 实例使用的根 DOM 元素。

    image.png

4. vm.$options——当前 Vue 实例的初始化选项

  • 类型Object

  • 只读

  • 详细

    用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处:

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

    image.png

5. vm.$parent——当前实例的父实例

  • 类型Vue instance

  • 只读

  • 详细

    父实例,如果当前实例有的话。

    image.png

6. vm.$root——当前组件树的根 Vue 实例

  • 类型Vue instance

  • 只读

  • 详细

    当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

    image.png

7. vm.$children——当前实例的直接子组件

  • 类型Array<Vue instance>

  • 只读

  • 详细

    当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。 如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。

    image.png

    image.png

8. vm.$slots——用来访问插槽的内容。

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

  • 只读

  • 响应性:否

  • 详细

    用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如:v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点,或 v-slot:default 的内容。

    请注意插槽不是响应性的。如果你需要一个组件可以在被传入的数据发生变化时重渲染,我们建议改变策略,依赖诸如 propsdata 等响应性实例选项。

    注意: v-slot:foo 在 2.6 以上的版本才支持。对于之前的版本,你可以使用废弃了的语法

    在使用渲染函数书写一个组件时,访问 vm.$slots 最有帮助。

    image.png

    /**
     * Runtime helper for resolving raw children VNodes into a slot object.
     */
    export function resolveSlots (
      children: ?Array<VNode>,
      context: ?Component
    ): { [key: string]: Array<VNode> } {
      if (!children || !children.length) {
        return {}
      }
      const slots = {}
      for (let i = 0, l = children.length; i < l; i++) {
        const child = children[i]
        const data = child.data
        // remove slot attribute if the node is resolved as a Vue slot node
        if (data && data.attrs && data.attrs.slot) {
          delete data.attrs.slot
        }
        // named slots should only be respected if the vnode was rendered in the
        // same context.
        if ((child.context === context || child.fnContext === context) &&
          data && data.slot != null
        ) {
          const name = data.slot
          const slot = (slots[name] || (slots[name] = []))
          if (child.tag === 'template') {
            slot.push.apply(slot, child.children || [])
          } else {
            slot.push(child)
          }
        } else {
          (slots.default || (slots.default = [])).push(child)
        }
      }
      // ignore slots that contains only whitespace
      for (const name in slots) {
        if (slots[name].every(isWhitespace)) {
          delete slots[name]
        }
      }
      return slots
    }
    
  • 示例

    <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)
        ])
      }
    })
    

    image.png

  • 参考

9.vm.$scopedSlots——用来访问作用域插槽

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

  • 只读

  • 详细

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

    vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。

    注意:从 2.6.0 开始,vm.$scopedSlots 有两个变化:

    1. 作用域插槽函数现在保证返回一个 VNode 数组,除非在返回值无效的情况下返回 undefined
    2. 所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数,不论当前插槽是否带有作用域,我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单,也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

    image.png

    image.png

    image.png

    image.png

  • 参考

10. vm.$refs——注册过 ref attribute 的所有 DOM 元素和组件实例

11. vm.$isServer——当前 Vue 实例是否运行于服务器

  • 类型boolean

  • 只读

  • 详细

    当前 Vue 实例是否运行于服务器。

    image.png

    image.png

  • 参考服务端渲染

12. vm.$attrs——父作用域中不作为 prop 被识别的 attribute 绑定

  • 类型{ [key: string]: string }

  • 只读

  • 详细

    包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

    image.png

    image.png

13. vm.$listeners——包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器

  • 类型{ [key: string]: Function | Array<Function> }

  • 只读

  • 详细

    包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

    image.png