Vue.js

# 实例 property

# $data

  • 类型：Object

  • 详细：

    组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。

  • 参考选项 / 数据 - data

# $props

  • 类型：Object

  • 详细：

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

# $el

  • 类型：any

  • 仅可读

  • 详细：

    组件实例使用的根 DOM 元素。

    For components using fragments, $el will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM. It is recommended to use template refs for direct access to DOM elements instead of relying on $el.

# $options

  • 类型：Object

  • 仅可读

  • 详细：

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

    const app = Vue.createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
    1
    2
    3
    4
    5
    6

# $parent

  • 类型：Vue instance

  • 仅可读

  • 详细：

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

# $root

  • 类型：Vue instance

  • 仅可读

  • 详细：

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

# $slots

  • 类型：{ [name: string]: (...args: any[]) => Array<VNode> | undefined }

  • 仅可读

  • 详细：

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

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

  • 示例：

    <blog-post>
  <template v-slot:header>
    <h1>About Me</h1>
  </template>

  <template v-slot:default>
    <p>
      Here's some page content, which will be included in $slots.default.
    </p>
  </template>

  <template v-slot:footer>
    <p>Hosted by <a href="https://www.dashgame.com" target="_blank">DashGame</a> Copyright © 2014-2020 <a href="https://evanyou.me/" target="_blank">Evan You</a></p>
  </template>
</blog-post>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const app = Vue.createApp({})

app.component('blog-post', {
  render() {
    return Vue.h('div', [
      Vue.h('header', this.$slots.header()),
      Vue.h('main', this.$slots.default()),
      Vue.h('footer', this.$slots.footer())
    ])
  }
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 参考

  • <slot> 组件

  • 通过插槽分发内容

  • 渲染函数 - 插槽

# $refs

  • 类型：Object

  • 仅可读

  • 详细：

一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

# $attrs

  • 类型：Object

  • 仅可读

  • 详细：

包含了父作用域中不作为组件 props 或自定义事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶的组件时非常有用。

← 实例方法 →