Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit cdad8cc

Browse filesBrowse files
authored
Update 0000-custom-directive-api-change.md
1 parent ace1996 commit cdad8cc
Copy full SHA for cdad8cc

File tree

Expand file treeCollapse file tree

1 file changed

+10
-4
lines changed
Filter options
Expand file treeCollapse file tree

1 file changed

+10
-4
lines changed

‎active-rfcs/0000-custom-directive-api-change.md

Copy file name to clipboardExpand all lines: active-rfcs/0000-custom-directive-api-change.md
+10-4Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,24 +69,30 @@ Will roughly compile into this:
6969
``` js
7070
const vFoo = resolveDirective('foo')
7171

72-
return applyDirectives(h('div'), this, [
72+
return withDirectives(h('div'), [
7373
[vFoo, bar]
7474
])
7575
```
7676

7777
Where `vFoo` will be the directive object written by the user, which contains hooks like `mounted` and `updated`.
7878

79-
`applyDirective` returns a cloned VNode with the user hooks wrapped and injected as vnode lifecycle hooks (see [Render Function API Changes](https://github.com/vuejs/rfcs/blob/render-fn-api-change/active-rfcs/0000-render-function-api-change.md#special-reserved-props) for more details):
79+
`withDirectives` returns a cloned VNode with the user hooks wrapped and injected as vnode lifecycle hooks (see [Render Function API Changes](https://github.com/vuejs/rfcs/blob/render-fn-api-change/active-rfcs/0000-render-function-api-change.md#special-reserved-props) for more details):
8080

8181
``` js
8282
{
83-
vnodeMounted(vnode, prevVNode) {
83+
onVnodeMounted(vnode) {
8484
// call vFoo.mounted(...)
8585
}
8686
}
8787
```
8888

89-
**As a result, custom directives are fully included as part of a VNode's data. When a custom directive is used on a component, these `vnodeXXX` hooks are passed down to the component as extraneous props and end up in `this.$attrs`.**
89+
**As a result, custom directives are fully included as part of a VNode's data. When a custom directive is used on a component, these `onVnodeXXX` hooks are passed down to the component as extraneous props and end up in `this.$attrs`.**
90+
91+
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:
92+
93+
``` html
94+
<div @vnodeMounted="myHook" />
95+
```
9096

9197
This is consistent with the attribute fallthrough behavior discussed in [vuejs/rfcs#26](https://github.com/vuejs/rfcs/pull/26). So, the rule for custom directives on a component will be the same as other extraneous attributes: it is up to the child component to decide where and whether to apply it. When the child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
9298

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.