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
components' documentation update base on issue#4117 (vuejs#574)
* components' documentation update base on issue#4117
vuejs/vue#4117
* require paths in both components and lifecycle reference
* set a name property since we are in a recursive context
* Update component circular dependency explanation
Copy file name to clipboardExpand all lines: src/v2/guide/components.md
+43-1Lines changed: 43 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -995,7 +995,7 @@ If your component isn't passed content via `slot` elements, you can even make it
995
995
996
996
Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them.
997
997
998
-
### Recursive Component
998
+
### Recursive Components
999
999
1000
1000
Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
1022
1022
1023
+
### Circular References Between Components
1024
+
1025
+
Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
1046
+
1047
+
However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
1048
+
1049
+
```
1050
+
Failed to mount component: template or render function not defined.
1051
+
```
1052
+
1053
+
To explain what's happening, I'll call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
1054
+
1055
+
In our case, I'll make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
0 commit comments