Skip to content

[pull] indonesian from master #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 5, 2020
Merged

[pull] indonesian from master #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
14851f5
fix: fixed custom directives migration guide
NataliaTepluhina Nov 4, 2020
474063a
Merge branch 'master' of github.com:vuejs/docs-next
NataliaTepluhina Nov 4, 2020
9080882
Update the GitHub repo link to `vue-next` (#672)
yuler Nov 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ actionButtons:
- text: Get Started
link: /guide/introduction
- text: GitHub
link: https://github.com/vuejs/vue
link: https://github.com/vuejs/vue-next
extraClass: github grey
icon: fa fa-github
target: _blank
Expand All @@ -30,7 +30,7 @@ footer: |
Copyright © 2014-2020 Evan You
socialIcons:
- type: GitHub
link: https://github.com/vuejs/vue
link: https://github.com/vuejs/vue-next
- type: Twitter
link: https://twitter.com/vuejs
- type: Medium
Expand Down
27 changes: 3 additions & 24 deletions src/guide/migration/custom-directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ badges:
Here is a quick summary of what has changed:

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

For more information, read on!

Expand Down Expand Up @@ -103,26 +102,6 @@ mounted(el, binding, vnode) {
}
```

## Implementation Details

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:

```html
<template>
<li>Hello</li>
<li>Vue</li>
<li>Devs!</li>
</template>
```

As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.

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`.

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:

```html
<div @vnodeMounted="myHook" />
```

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.
:::warning
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.
:::