Vue 3.0 实例property
#$data
- 类型：
Object
- 详细：
组件实例观察的数据对象。组件实例代理了对其 data 对象 property 的访问。
#$props
- 类型：
Object
- 详细：
当前组件接收到的 props 对象。组件实例代理了对其 props 对象 property 的访问。
#$el
- 类型：
any
- 仅可读
- 详细：
组件实例使用的根 DOM 元素。
对于使用片段的组件，$el将是Vue用于跟踪组件在DOM中位置的占位符DOM节点。建议使用模板引用直接访问DOM元素，而不是依赖$el。
#$options
- 类型：
Object
- 仅可读
- 详细：
用于当前组件实例的初始化选项。需要在选项中包含自定义 property 时会有用处：
const app = Vue.createApp({
customOption: 'foo',
created() {
console.log(this.$options.customOption) // => 'foo'
}
})#$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>Copyright 2020 Evan You</p>
</template>
</blog-post> 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())
])
}
})- 参考
#$refs
- 类型：
Object - 仅可读
- 详细：
一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。
#$attrs
- 类型：
Object - 仅可读
- 详细：
包含了父作用域中不作为组件 props 或自定义事件。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高阶的组件时非常有用。