Skip to content

Commit 0d9d9ac

Browse files
committed
add note for v-ref and v-el
1 parent 85e58a5 commit 0d9d9ac

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

src/api/index.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1652,15 +1652,21 @@ type: api
16521652

16531653
When used on a component together with `v-for`, the registered value will be an Array containing all the child component instances corresponding to the Array they are bound to. If the data source for `v-for` is an Object, the registered value will be an Object containing key-instance pairs mirroring the source Object.
16541654

1655+
- **Note:**
1656+
1657+
Because HTML is case-insensitive, camelCase usage like `v-ref:someRef` will be converted to all lowercase. You can use `v-ref:some-ref` which properly sets `this.$refs.someRef`.
1658+
16551659
- **Example:**
16561660

16571661
``` html
16581662
<comp v-ref:child></comp>
1663+
<comp v-ref:some-child></comp>
16591664
```
16601665

16611666
``` js
16621667
// access from parent:
16631668
this.$refs.child
1669+
this.$refs.someChild
16641670
```
16651671

16661672
With `v-for`:
@@ -1686,13 +1692,19 @@ type: api
16861692

16871693
Register a reference to a DOM element on its owner Vue instance's `$els` object for easier access.
16881694

1695+
- **Note:**
1696+
1697+
Because HTML is case-insensitive, camelCase usage like `v-el:someEl` will be converted to all lowercase. You can use `v-el:some-el` which properly sets `this.$refs.someEl`.
1698+
16891699
- **Example:**
16901700

16911701
``` html
16921702
<span v-el:msg>hello</span>
1703+
<span v-el:other-msg>world</span>
16931704
```
16941705
``` js
16951706
this.$els.msg.textContent // -> "hello"
1707+
this.$els.otherMsg.textContent // -> "world"
16961708
```
16971709

16981710
### v-pre

0 commit comments

Comments
 (0)