Vue.js의 재귀 구성 요소를 통해 트리 메뉴를 만드는 방법

이 글에서는 Vue.js 재귀 구성 요소를 사용하여 축소 가능한 트리 메뉴를 만드는 교육 내용을 주로 소개합니다. 관심 있는 친구들은 따라하면서 배울 수 있습니다.

Vue.js에서는 다음과 같이 재귀 구성 요소가 자신을 호출합니다.

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

재귀 구성 요소는 댓글, 블로그의 중첩 메뉴를 표시하는 데 자주 사용되거나 특정 콘텐츠는 다르지만 기본적으로 상위 및 하위 유형이 동일합니다. . 예:

이제 재귀 구성 요소를 효과적으로 사용하는 방법을 보여주기 위해 확장 가능/축소 트리 메뉴를 구축하여 단계별로 진행하겠습니다.

데이터 구조

트리 UI의 재귀 구성 요소는 일부 재귀 데이터 구조를 시각적으로 표현한 것입니다. 이 튜토리얼에서는 각 노드가 객체인

라벨 속성인 트리 구조를 사용합니다.

하위 노드가 있는 경우 노드 속성은 하나 이상의 노드의 배열 속성입니다.

모든 트리 구조와 마찬가지로 루트 노드가 있어야 하지만 깊이는 무한할 수 있습니다.

let tree = {
 label: 'root',
 nodes: [
  {
  label: 'item1',
  nodes: [
   {
   label: 'item1.1'
   },
   {
   label: 'item1.2',
   nodes: [
    {
    label: 'item1.2.1'
    }
   ]
   }
  ]
  }, 
  {
  label: 'item2' 
  }
 ]
 }

재귀 구성 요소

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>

컴포넌트를 재귀적으로 사용하는 경우 먼저 Vue.comComponent에 대한 전역 정의를 만들거나 이름 속성을 지정해야 합니다. 그렇지 않으면 하위 구성 요소가 더 이상 호출할 수 없으며 정의되지 않은 "정의되지 않은 구성 요소 오류" 오류 메시지가 표시됩니다.

기본 이벤트

모든 재귀 함수와 마찬가지로 재귀를 종료하려면 기본 이벤트가 필요합니다. 그렇지 않으면 렌더링이 무한정 계속되어 결국 스택 오버플로가 발생합니다.

트리 메뉴에서 자식이 없는 노드에 도달하면 재귀를 중지하려고 합니다. v-if 를 통해 이 작업을 수행할 수 있지만 v-for 사용을 선택하면 노드 배열에 추가 정의가 없으면 트리 메뉴 구성 요소가 호출됩니다. 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>

Usage

이제 이 구성 요소를 어떻게 사용합니까? 먼저 데이터 속성과 정의된 treemenu 구성 요소를 포함하는 데이터 구조를 사용하여 Vue 인스턴스를 선언합니다. app.js 파일은 다음과 같습니다.

 import TreeMenu from './TreeMenu.vue'
 let tree = {
 ...
 }
 new Vue({
 el: '#app',
 data: {
  tree
 },
 components: {
  TreeMenu
 }
 })

데이터 구조에 루트 노드가 있다는 점을 기억하세요. 소품에 대한 루트 노드 속성을 사용하여 기본 템플릿에서 TreeMenu 구성 요소를 재귀적으로 호출하는 것으로 시작합니다.

<p id="app">
 <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </p>

현재 모습은 다음과 같습니다.

올바른 자세

그림의 "깊이"를 시각적으로 식별하는 것이 좋습니다. 사용자가 UI에서 데이터 구조에 대한 느낌을 얻을 수 있도록 하위 구성 요소입니다. 각 수준에서 하위 노드를 들여쓰기하여 이를 달성하겠습니다.

이는 TreeMenu를 통해 깊이 소품 정의를 추가하여 달성됩니다. 이 값을 사용하여 인라인 스타일을 변환과 동적으로 바인딩합니다. 각 노드의 레이블에 대해 변환: 변환 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>

깊이 속성은 0부터 시작합니다. 위의 구성 요소 템플릿에서 이 값이 하위 노드에 전달될 때마다 증가하는 것을 볼 수 있습니다.

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

참고: 깊이 값을 v바인딩하여 문자열이 아닌 JavaScript 숫자 유형인지 확인하세요.

Expand/Collapse

재귀 데이터 구조가 클 수 있으므로 이를 표시하는 좋은 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>

Summary

이렇게 작업 트리 메뉴가 생겼습니다. 마무리 작업으로 더하기/빼기 아이콘을 추가하여 UI를 더 눈에 띄게 만들 수 있습니다. 또한 원본 showChildren에 훌륭한 글꼴과 컴퓨팅 기능을 추가했습니다.

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

jQuery에서 마우스 반응형 Taobao 애니메이션 효과를 구현하는 방법

jQuery로 구현한 마우스 반응 버퍼 애니메이션 효과

vue2.0 반응성을 구현하는 방법(자세한 튜토리얼)

방법 JS

를 통해 텍스트 간헐적 순환 스크롤 효과를 얻으려면

React의 심판을 자세히 설명하세요(자세한 튜토리얼)

위 내용은 Vue.js의 재귀 구성 요소를 통해 트리 메뉴를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!