diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index e35d0c14c1..22249e30f3 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -68,7 +68,8 @@ const sidebar = { '/api/options-composition', '/api/options-misc' ] - } + }, + '/api/instance-properties.md' ] } diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md new file mode 100644 index 0000000000..6ae2277661 --- /dev/null +++ b/src/api/instance-properties.md @@ -0,0 +1,146 @@ +# Instance Properties + +## $data + +- **Type:** `Object` + +- **Details:** + + The data object that the Vue instance is observing. The Vue instance proxies access to the properties on its data object. + +- **See also:** [Options / Data - data](./options-data.html#data-2) + +## $props + +- **Type:** `Object` + +- **Details:** + + An object representing the current props a component has received. The Vue instance proxies access to the properties on its props object. + +## $el + +- **Type:** `any` + +- **Read only** + +- **Details:** + + The root DOM element that the Vue instance is managing. + +## $options + +- **Type:** `Object` + +- **Read only** + +- **Details:** + + The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options: + + ```js + const app = Vue.createApp({ + customOption: 'foo', + created() { + console.log(this.$options.customOption) // => 'foo' + } + }) + ``` + +## $parent + +- **Type:** `Vue instance` + +- **Read only** + +- **Details:** + + The parent instance, if the current instance has one. + +## $root + +- **Type:** `Vue instance` + +- **Read only** + +- **Details:** + + The root Vue instance of the current component tree. If the current instance has no parents this value will be itself. + +## $slots + +- **Type:** `{ [name: string]: (...args: any[]) => Array | undefined }` + +- **Read only** + +- **Details:** + + Used to programmatically access content [distributed by slots](../guide/component-basics.html#content-distribution-with-slots). Each [named slot](../guide/component-slots.html#named-slots) has its own corresponding property (e.g. the contents of `v-slot:foo` will be found at `vm.$slots.foo()`). The `default` property contains either nodes not included in a named slot or contents of `v-slot:default`. + + Accessing `vm.$slots` is most useful when writing a component with a [render function](TODO). + +- **Example:** + + ```html + + + + + + + + ``` + + ```js + 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()) + ]) + } + }) + ``` + +- **See also:** + - [`` Component](TODO) + - [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots) + - [Render Functions - Slots](TODO) + +## $refs + +- **Type:** `Object` + +- **Read only** + +- **Details:** + +An object of DOM elements and component instances, registered with [`ref` attributes](TODO). + +- **See also:** + - [Child Component Refs](TODO:refs) + - [Special Attributes - ref](TODO) + +## $attrs + +- **Type:** `Object` + +- **Read only** + +- **Details:** + +Contains parent-scope attribute bindings and events that are not recognized (and extracted) as component [props](./options-data.html#props) or [custom events](./options-data.html#emits). When a component doesn't have any declared props or custom events, this essentially contains all parent-scope bindings, and can be passed down to an inner component via `v-bind="$attrs"` - useful when creating higher-order components. + +- **See also:** + - [Non-Prop Attributes](../guide/component-props.html#non-prop-attributes)