云淡峰清

# 实例属性

# $data

  • 类型：Object

  • 详细：

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

  • 参考：选项 / 数据 - data

# $props

  • 类型：Object

  • 详细：

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

# $el

  • 类型：any

  • 只读

  • 详细：

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

# $options

  • 类型：Object

  • 只读

  • 详细：

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

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

# $parent

  • 类型：Component instance

  • 只读

  • 详细：

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

# $root

  • 类型：Component 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>Copyright 2020 Evan You</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

  • 参考：

# $refs

  • 类型：Object

  • 只读

  • 详细：

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

# $attrs

  • 类型：Object

  • 只读

  • 详细：

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

← 实例方法 →