Rumah hujung hadapan web tutorial js 在Vue.js中通过递归组件如何构建树形菜单

在Vue.js中通过递归组件如何构建树形菜单

Jun 15, 2018 pm 05:24 PM
vue.js menu pokok komponen rekursif

这篇文章主要介绍了用Vue.js递归组件构建一个可折叠的树形菜单的教学内容,有兴趣的朋友跟着学习下。

在Vue.js中一个递归组件调用的是其本身,如:

Vue.component('recursive-component', {
 template: `<!--Invoking myself!-->
    <recursive-component></recursive-component>
 });
Salin selepas log masuk

递归组件常用于在blog上显示注释、嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同。例如:

现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。

数据结构

一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中,我们将使用树状结构,其中每个节点都是一个对象:

一个 label 属性。

如果它有子节点,一个 nodes 属性,则它是一个或多个节点的数组属性。

与所有树结构一样,它必须有一个根节点,但可以无限深。

let tree = {
 label: &#39;root&#39;,
 nodes: [
  {
  label: &#39;item1&#39;,
  nodes: [
   {
   label: &#39;item1.1&#39;
   },
   {
   label: &#39;item1.2&#39;,
   nodes: [
    {
    label: &#39;item1.2.1&#39;
    }
   ]
   }
  ]
  }, 
  {
  label: &#39;item2&#39; 
  }
 ]
 }
Salin selepas log masuk

递归组件

让我们做一个递归组件来显示我们的称为 TreeMenu 的数据结构。它只显示当前节点的标签,并调用自己来显示任何子节点。文件名:TreeMenu.vue,内容如下:

<template>
 <p class="tree-menu">
  <p>{{ label }}</p>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes"
  :label="node.label"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ &#39;label&#39;, &#39;nodes&#39; ],
  name: &#39;tree-menu&#39;
 }
 </script>
Salin selepas log masuk

如果你使用一个组件递归,必须先给 Vue.component 做一个全局的定义,或者,给它一个 name 属性。否则,任何子组件将无法进一步调用它,你会得到一个不确定的“undefined component error”的错误提示。

基本事件

与任何递归函数一样,你需要一个基本事件来结束递归,否则渲染将无限期地继续下去,最终会导致堆栈溢出。

在树菜单中,当我们到达一个没有子节点的节点的时候,我们希望停止递归。你能通过 v-if 做到这一功能,但我们选择使用 v-for 将隐式地为我们实现它;如果 nodes 数组没有任何进一步的定义 tree-menu 组件将被调用。template.vue文件如下:

<template>
 <p class="tree-menu">
  ...
  <!--If `nodes` is undefined this will not render-->
  <tree-menu v-for="node in nodes"></tree-menu>
 </template>
Salin selepas log masuk

使用用法

我们现在如何使用这个组件?首先,我们声明一个Vue实例,具有一个数据结构包括data属性和定义过的treemenu组件。app.js文件如下:

 import TreeMenu from &#39;./TreeMenu.vue&#39;
 let tree = {
 ...
 }
 new Vue({
 el: &#39;#app&#39;,
 data: {
  tree
 },
 components: {
  TreeMenu
 }
 })
Salin selepas log masuk

请记住,我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件,使用根 nodes 属性来props:

<p id="app">
 <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </p>
Salin selepas log masuk

下面是它目前的样子:

正确的姿势

在视觉上识别子组件的“深度”是很好的,这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。

这是通过增加一个depth prop定义,通过 TreeMenu 来实现。我们将使用这个值动态地将内联样式与转换绑定在一起:将使用transform: translate的CSS规则为每个节点的标签,从而创建缩进。template.vue修改如下**:**

<template>
 <p class="tree-menu">
  <p :style="indent">{{ label }}</p>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
  name: &#39;tree-menu&#39;,
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  }
 }
 </script>
Salin selepas log masuk

depth 属性在主模板中从零开始。在上面的组件模板中,你可以看到每次传递到任何子节点时这个值都会递增。

<p id="app">
 <tree-menu 
  :label="tree.label" 
  :nodes="tree.nodes"
  :depth="0"
 ></tree-menu>
 </p>
Salin selepas log masuk

注意:记得 v-bind depth值以确保它是一个JavaScript数字类型而不是字符串。

展开/收起

由于递归数据结构可能很大,所以显示它们的一个很好的UI技巧是隐藏除根节点以外的所有节点,以便用户可以根据需要展开或收起节点。

为此,我们将增加一个局部属性showChildren 。如果他的值为False,子节点将不会被渲染。此值应通过点击节点切换,所以我们需要使用一个单击事件的监听器方法 toggleChildren 来进行管理。template.vue文件修改如下**:**

<template>
 <p class="tree-menu">
  <p :style="indent" @click="toggleChildren">{{ label }}</p>
  <tree-menu 
  v-if="showChildren"
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
  data() {
  return { showChildren: false }
  },
  name: &#39;tree-menu&#39;,
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  },
  methods: {
  toggleChildren() {
   this.showChildren = !this.showChildren;
  }
  }
 }
 </script>
Salin selepas log masuk

总结

这样,我们就有了一个工作树菜单。用来画龙点睛的一个方法是,你可以添加一个加号/减号图标,这样可以使UI的显示更加明显。我还增加了的很好的字体和计算性能在原来 showChildren 的基础上。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在jQuery中如何实现鼠标响应式淘宝动画效果

jQuery实现的鼠标响应缓冲动画效果

如何实现vue2.0响应式(详细教程)

通过JS如何实现文字间歇循环滚动效果

详细讲解React中的refs(详细教程)

Atas ialah kandungan terperinci 在Vue.js中通过递归组件如何构建树形菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Mari kita bercakap secara mendalam tentang reactive() dalam vue3 Jan 06, 2023 pm 09:21 PM

Kata Pengantar: Dalam pembangunan vue3, reaktif menyediakan kaedah untuk melaksanakan data responsif. Ini adalah API yang kerap digunakan dalam pembangunan harian. Dalam artikel ini, penulis akan meneroka mekanisme operasi dalamannya.

Pertempuran praktikal: Bangunkan pemalam dalam vscode yang menyokong fail vue untuk melompat ke definisi Pertempuran praktikal: Bangunkan pemalam dalam vscode yang menyokong fail vue untuk melompat ke definisi Nov 16, 2022 pm 08:43 PM

vscode sendiri menyokong komponen fail Vue untuk melompat ke definisi, tetapi sokongannya sangat lemah. Di bawah konfigurasi vue-cli, kami boleh menulis banyak penggunaan fleksibel, yang boleh meningkatkan kecekapan pengeluaran kami. Tetapi kaedah penulisan fleksibel inilah yang menghalang fungsi yang disediakan oleh vscode itu sendiri daripada menyokong melompat ke definisi fail. Untuk serasi dengan kaedah penulisan yang fleksibel ini dan meningkatkan kecekapan kerja, saya menulis pemalam vscode yang menyokong fail Vue untuk melompat ke definisi.

Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue Apr 24, 2023 am 10:52 AM

Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).

Terokai cara menulis ujian unit dalam Vue3 Terokai cara menulis ujian unit dalam Vue3 Apr 25, 2023 pm 07:41 PM

Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.

Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Apakah perbezaan antara komponenisasi dan modularisasi dalam vue Dec 15, 2022 pm 12:54 PM

Perbezaan antara komponenisasi dan modularisasi: Modularisasi dibahagikan dari perspektif logik kod; ia memudahkan pembangunan berlapis kod dan memastikan bahawa fungsi setiap modul berfungsi adalah konsisten. Pengkomponenan adalah perancangan dari sudut antara muka UI pemkomponenan bahagian hadapan memudahkan penggunaan semula komponen UI.

Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Analisis ringkas tentang cara mengendalikan pengecualian dalam komponen dinamik Vue3 Dec 02, 2022 pm 09:11 PM

Bagaimana untuk mengendalikan pengecualian dalam komponen dinamik Vue3? Artikel berikut akan membincangkan kaedah pengendalian pengecualian komponen dinamik Vue3 Saya harap ia akan membantu semua orang.

Perbincangan mendalam tentang cara vite menghurai fail .env Perbincangan mendalam tentang cara vite menghurai fail .env Jan 24, 2023 am 05:30 AM

Apabila menggunakan rangka kerja Vue untuk membangunkan projek bahagian hadapan, kami akan menggunakan berbilang persekitaran apabila digunakan Selalunya nama domain antara muka yang dipanggil oleh pembangunan, ujian dan persekitaran dalam talian adalah berbeza. Bagaimanakah kita boleh membuat perbezaan? Iaitu menggunakan pembolehubah dan corak persekitaran.

Analisis prinsip Vue2 melaksanakan API komposisi Analisis prinsip Vue2 melaksanakan API komposisi Jan 13, 2023 am 08:30 AM

Sejak keluaran Vue3, perkataan komposisi API telah memasuki bidang penglihatan pelajar yang menulis Vue. vue/composition-api plug-in, Pelajar Vue2 juga boleh menaiki bas Seterusnya, kami akan menggunakan ref responsif dan reaktif untuk menjalankan analisis mendalam tentang cara pemalam ini mencapai perkara ini.

See all articles