Skip to content

Commit 88fbd3b

Browse files
pull[bot]NataliaTepluhinayuler
authored
[pull] indonesian from master (#7)
* fix: fixed custom directives migration guide * Update the GitHub repo link to `vue-next` (vuejs#672) Co-authored-by: NataliaTepluhina <[email protected]> Co-authored-by: YuLe <[email protected]>
1 parent fc80ea3 commit 88fbd3b

File tree

2 files changed

+5
-26
lines changed

2 files changed

+5
-26
lines changed

src/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ actionButtons:
1111
- text: Get Started
1212
link: /guide/introduction
1313
- text: GitHub
14-
link: https://github.com/vuejs/vue
14+
link: https://github.com/vuejs/vue-next
1515
extraClass: github grey
1616
icon: fa fa-github
1717
target: _blank
@@ -30,7 +30,7 @@ footer: |
3030
Copyright © 2014-2020 Evan You
3131
socialIcons:
3232
- type: GitHub
33-
link: https://github.com/vuejs/vue
33+
link: https://github.com/vuejs/vue-next
3434
- type: Twitter
3535
link: https://twitter.com/vuejs
3636
- type: Medium

src/guide/migration/custom-directives.md

+3-24
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ badges:
1010
Here is a quick summary of what has changed:
1111

1212
- API has been renamed to better align with component lifecycle
13-
- Custom directives will be controlled by child component via `v-bind="$attrs"`
1413

1514
For more information, read on!
1615

@@ -103,26 +102,6 @@ mounted(el, binding, vnode) {
103102
}
104103
```
105104

106-
## Implementation Details
107-
108-
In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple `<li>` elements or the children elements of a table:
109-
110-
```html
111-
<template>
112-
<li>Hello</li>
113-
<li>Vue</li>
114-
<li>Devs!</li>
115-
</template>
116-
```
117-
118-
As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.
119-
120-
As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, hooks are passed down to the component as extraneous props and end up in `this.$attrs`.
121-
122-
This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
123-
124-
```html
125-
<div @vnodeMounted="myHook" />
126-
```
127-
128-
This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
105+
:::warning
106+
With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
107+
:::

0 commit comments

Comments
 (0)