vuejs/v2.vuejs.org

Add reactivity warning to $slots API page

Open

#2,662 opened on Aug 10, 2020

View on GitHub
 (3 comments) (0 reactions) (1 assignee)JavaScript (5,072 stars) (3,550 forks)batch import
good first issue

Description

Summary Slots are not reactive, but the docs do not reflect this

Proposed solution Add a warning in all versions of the docs on the $slots page, where its reactivity seems most likely to be referenced from a user perspective

Further explanation While trying to debug an issue with a computed property that had this.$slots.default as a dependency in a jsx component, I was unable to determine whether the slots were getting updated data via console.logs; it appeared that slots were not reactive, but I couldn't confirm by printing (due to the fact that no updates would trigger as a result of $slots not being reactive).

A colleague found a response from @LinusBorg on this issue, which seems to confirm slots have never been and will never be reactive, and it appears as though the TODO to update the docs as necessary never made it in, so I'd like to rectify that now 🙂

Aside In the same thread, @chrisvfritz suggests moving the data to props or another reactive option if reactivity is needed; this may be a good tip to include but I'm not sure whether he means in lieu of $slots or to pass the $slots to props or something else...

Contributor guide