You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> In 2.6.0+, this hook also captures errors thrown inside `v-on` DOM listeners. In addition, if any of the covered hooks or handlers returns a Promise chain (e.g. async functions), the error from that Promise chain will also be handled.
Make an object reactive. Internally, Vue uses this on the object returned by the `data` function.
419
+
420
+
The returned object can be used directly inside [render functions](../guide/render-function.html) and [computed properties](../guide/computed.html), and will trigger appropriate updates when mutated. It can also be used as a minimal, cross-component state store for simple scenarios:
421
+
422
+
```js
423
+
conststate=Vue.observable({ count:0 })
424
+
425
+
constDemo= {
426
+
render(h) {
427
+
returnh('button', {
428
+
on: { click: () => { state.count++ }}
429
+
}, `count is: ${state.count}`)
430
+
}
431
+
}
432
+
```
433
+
434
+
<pclass="tip">In Vue 2.x, `Vue.observable` directly mutates the object passed to it, so that it is equivalent to the object returned, as [demonstrated here](../guide/instance.html#Data-and-Methods). In Vue 3.x, a reactive proxy will be returned instead, leaving the original object non-reactive if mutated directly. Therefore, for future compatibility, we recommend always working with the object returned by `Vue.observable`, rather than the object originally passed to it.</p>
435
+
436
+
-**See also:**[Reactivity in Depth](../guide/reactivity.html)
**Note:** since 2.6.0+, there are two notable changes to this property:
1438
+
1439
+
1. Scoped slot functions are now guaranteed to return an array of VNodes, unless the return value is invalid, in which case the function will return `undefined`.
1440
+
1441
+
2. All `$slots` are now also exposed on `$scopedSlots` as functions. If you work with render functions, it is now recommended to always access slots via `$scopedSlots`, whether they currently use a scope or not. This will not only make future refactors to add a scope simpler, but also ease your eventual migration to Vue 3, where all slots will be functions.
In 2.6+, `v-for` can also work on values that implement the [Iterable Protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol), including native `Map` and `Set`. However, it should be noted that Vue 2.x currently does not support reactivity on `Map` and `Set` values, so cannot automatically detect changes.
- **Expects:** JavaScript expression that is valid in a function argument position (supports destructuring in [supported environments](../guide/components-slots.html#Slot-Props-Destructuring)). Optional - only needed if expecting props to be passed to the slot.
2226
+
2227
+
- **Argument:**slot name (optional, defaults to `default`)
2228
+
2229
+
- **Limited to:**
2230
+
- `<template>`
2231
+
- [components](../guide/components-slots.html#Abbreviated-Syntax-for-Lone-Default-Slots) (for a lone default slot with props)
2232
+
2233
+
- **Usage:**
2234
+
2235
+
Denote named slots or slots that expect to receive props.
2236
+
2237
+
- **Example:**
2238
+
2239
+
```html
2240
+
<!-- Named slots -->
2241
+
<base-layout>
2242
+
<templatev-slot:header>
2243
+
Headercontent
2244
+
</template>
2245
+
2246
+
Default slotcontent
2247
+
2248
+
<templatev-slot:footer>
2249
+
Footercontent
2250
+
</template>
2251
+
</base-layout>
2252
+
2253
+
<!-- Named slot that receives props -->
2254
+
<infinite-scroll>
2255
+
<templatev-slot:item="slotProps">
2256
+
<div class="item">
2257
+
{{ slotProps.item.text }}
2258
+
</div>
2259
+
</template>
2260
+
</infinite-scroll>
2261
+
2262
+
<!-- Default slot that receive props, with destructuring -->
Used to denote an element or component as a scoped slot. The attribute's value should be a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments you can also use ES2015 destructuring in the expression. Serves as a replacement for [`scope`](#scope-replaced) in 2.5.0+.
2436
+
2437
+
This attribute does not support dynamic binding.
2438
+
2439
+
- **See also:** [Scoped Slots with `slot-scope`](../guide/components.html#Scoped-Slots-with-slot-scope)
0 commit comments