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
Copy file name to clipboardExpand all lines: docs/faq/index.md
+6-2Lines changed: 6 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ This FAQ aims to answer some of the most common programming questions that we ge
5
5
It is not a substitute for the official Vue documentation, available at <https://vuejs.org/>. Those docs include an FAQ for Vue itself at <https://vuejs.org/about/faq.html>.
6
6
7
7
::: warning Work in progress
8
-
We've only just started work on this FAQ and most of the answers will be incomplete. Some questions don't really have an answer yet, they're just placeholders.
8
+
Only about half the questions have complete answers. Those questions are listed in the sidebar on the left. The other questions are just stubs.
9
9
:::
10
10
11
11
---
@@ -46,13 +46,17 @@ We've only just started work on this FAQ and most of the answers will be incompl
46
46
<!-- Vue code patterns -->
47
47
48
48
-[How should my components communicate?](component-communication)
49
+
-[How do I call a method in a child component?](invoking-child-methods)
50
+
-[Why are my template refs not working?](template-refs)
51
+
-[How can I share state with a composable?](sharing-state)
49
52
-[How can I pass all slots through to a child component?](forwarding-slots)
50
53
-[How can I make Vue 'wait' for the data before rendering?](delaying-rendering)
51
54
-[Why isn't `v-html` rendering my components?](components-in-v-html)
52
55
-[Can I create a local variable in my template?](template-local-variables)
56
+
-[Can I use JavaScript classes for my reactive data?](reactivity-and-classes)
53
57
-[Why does selecting one item select them all?](independent-selections)
54
-
-[Why are my template refs not working?](template-refs)
55
58
-[How do I create unique element ids with Vue?](unique-element-ids)
59
+
-[Why can't I use the current route inside `App.vue`?](accessing-the-route)
We are still working on writing the answers to the FAQ questions. The answer below is incomplete, but you may still find it useful.
5
+
:::
6
+
7
+
You can invoke methods on child components using template refs. See <https://vuejs.org/guide/essentials/template-refs.html>.
8
+
9
+
If the child component is using `<script setup>`, it'll need to expose any methods explicitly, using [`defineExpose()`](https://vuejs.org/api/sfc-script-setup.html#defineexpose).
10
+
11
+
See also [Why are my template refs not working?](template-refs).
12
+
13
+
However, template refs are a feature you should rarely need. Usually there's a better way, but it depends on the specifics of what exactly you're trying to do. It's common for newcomers to Vue to overuse template refs, often because they're trying to use patterns they've used in other types of programming. The premise of the question, that the parent needs to call a method on the child, is precisely the line of reasoning that leads to template refs being misused. There's usually a better alternative to implement the underlying requirements.
# Can I use JavaScript classes for my reactive data?
2
+
3
+
::: warning This answer is a stub.
4
+
We are still working on writing the answers to the FAQ questions. The answer below is incomplete, but you may still find it useful.
5
+
:::
6
+
7
+
You should avoid using JavaScript classes for reactive data.
8
+
9
+
Built-in classes such as `Array`, `Set` and `Map` will work fine, but Vue has specific code to handle those classes. It won't know how to handle classes that you've written yourself.
10
+
11
+
It is possible to use JS classes, but they have to be written carefully to avoid breaking reactivity.
12
+
13
+
There are two common reasons for using classes:
14
+
15
+
1. You're used to working with classes in other frameworks or languages. In that case, you should probably just not use them with Vue.
16
+
2. They're coming from a third-party library. In this scenario, you may want to keep the class non-reactive and instead create a separate object that exposes a reactive copy of the data. The original class will likely provide some mechanism, e.g. callbacks or events, that you can use to keep the objects in sync.
We are still working on writing the answers to the FAQ questions. The answer below is incomplete, but you may still find it useful.
5
+
:::
6
+
7
+
Composables are JavaScript functions. Vue doesn't have any specific support for composables, it's just a name given to a common usage pattern. Normal JavaScript rules still apply.
8
+
9
+
So if a ref is created inside the composable, you'll get a new ref each time the composable is called:
10
+
11
+
```js
12
+
exportfunctionuseSidebar() {
13
+
constisOpen=ref(false)
14
+
15
+
return { isOpen }
16
+
}
17
+
```
18
+
19
+
Every component that calls `useSidebar()` will get a different ref, so this composable can't be used to shared state.
20
+
21
+
If we move the creation of the ref outside the function, it'll be shared instead:
22
+
23
+
```js
24
+
constisOpen=ref(false)
25
+
26
+
exportfunctionuseSidebar() {
27
+
return { isOpen }
28
+
}
29
+
```
30
+
31
+
Now, every call to `useSidebar()` will return the same `ref`, allowing that state to be shared.
32
+
33
+
In the example above, where we're just returning a ref, it probably isn't necessary to use a composable at all. We could just share the ref directly:
0 commit comments