回归一直是学习算法的痛苦,但在某些情况下,使用回归感觉比使用迭代更自然。
我们可以通过遵循相同的机制在 Vue.js 和任何其他框架中创建重复组件。
创建一棵树组件
想象一个必须渲染树结构的组件,例如显示目录树:
1+ Root directory
2 + Directory A
3 + Directory A1
4 + Directory B
我们可以将目录表示为树,所有子目录作为该树的节点列表,树总有一个根节点,直到它到达叶节点。
例如,我们可以使用具有标签和儿童键的对象:
1const tree = {
2 label: "A cool folder",
3 children: [
4 {
5 label: "A cool sub-folder 1",
6 children: [
7 { label: "A cool sub-sub-folder 1" },
8 { label: "A cool sub-sub-folder 2" }
9 ]
10 },
11 { label: "This one is not that cool" }
12 ]
13}
考虑到之前的结构,让我们创建一个 Tree.vue 组件,将其作为一个支撑,并渲染根节点:
1[label Tree.vue]
2<template>
3 <div class="tree">
4 <ul class="tree-list">
5 <node-tree :node="treeData"></node-tree>
6 </ul>
7 </div>
8</template>
9
10<script>
11import NodeTree from "./NodeTree";
12
13export default {
14 props: {
15 treeData: Object
16 },
17 components: {
18 NodeTree
19 }
20};
21</script>
22
23<style>
24.tree-list ul {
25 padding-left: 16px;
26 margin: 6px 0;
27}
28</style>
我们在列表的左侧添加一些垫子,所以他们有这种层次性的外观。
这里没有什么特别的事情发生,我们只是获得一个treeData属性,并将其作为第一个节点传递给我们尚未实现的NodeTree组件。
实现节点树
节点树必须展示其标签,但同时也必须展示其子女,这样一来,节点树也是一种子树。
一个简单的 NodeTree.vue 组件将是:
1[label NodeTree.vue]
2<template>
3 <li class="node-tree">
4 <span class="label">{{ node.label }}</span>
5 </li>
6</template>
7
8<script>
9export default {
10 props: {
11 node: Object
12 }
13};
14</script>
但是组件只显示一个标签,我们仍然要让它渲染它的孩子,这也是树节点。
如果你考虑到这一点,它与回归函数相同;它们是只要条件没有满足,就称为自身的函数。
因此,我们必须使节点树显示一个节点树列表. 为了访问来自同一组件的组件,我们必须添加名称组件选项:
1[label NodeTree.vue]
2<template>
3 <li class="node-tree">
4 <span class="label">{{ node.label }}</span>
5
6 <ul v-if="node.children && node.children.length">
7 <node v-for="child in node.children" :node="child"></node>
8 </ul>
9 </li>
10</template>
11
12<script>
13export default {
14 name: "node",
15 props: {
16 node: Object
17 }
18};
19</script>
这将使NodeTree组件自称,直到它到达叶节点。
正如你所看到的,我们正在使用名称:节点``,因此<节点>标签. 儿童树节点只在有孩子时进行渲染,将儿童节点作为他们的财产。
使用木材组件
例如,您可以创建一个 App.vue 组件,将以前的数据结构传递给树组件:
1[label App.vue]
2<template>
3 <div>
4 <tree :tree-data="tree"></tree>
5 </div>
6</template>
7
8<script>
9import Tree from "./Tree";
10
11export default {
12 data: () => ({
13 tree: {
14 label: "A cool folder",
15 children: [
16 {
17 label: "A cool sub-folder 1",
18 children: [
19 { label: "A cool sub-sub-folder 1" },
20 { label: "A cool sub-sub-folder 2" }
21 ]
22 },
23 { label: "This one is not that cool" }
24 ]
25 }
26 }),
27 components: {
28 Tree
29 }
30};
31</script>
包装上
回归不一定是困难的,Vue.js通过从其DSL或模板提供支持,使其成为一个风景。
我希望这篇文章能帮助你构建出色的木材组件!
保持冷静