집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js의 트리 메뉴에 재귀 구성 요소를 작성하는 방법

Vue.js의 트리 메뉴에 재귀 구성 요소를 작성하는 방법

php中世界最好的语言원래의: 2018-04-13 16:05:281797검색

이번에는 Vue.js를 사용하여 재귀 구성 요소를 트리 메뉴에 작성하는 방법을 보여 드리겠습니다. Vue.js에서 재귀 구성 요소를 트리 메뉴에 작성하는 방법은 다음과 같습니다. 보세요. Vue.js에서는 재귀 구성 요소가 다음과 같이 자신을 호출합니다.

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

재귀 구성 요소는 블로그, 중첩 메뉴 또는 내용은 다르지만 기본적으로 상위 및 하위 항목과 동일한 유형에

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

데이터 구조

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

라벨

속성

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

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

rreee

재귀 구성 요소

TreeMenu라는 데이터 구조를 표시하는 재귀 구성 요소를 만들어 보겠습니다. 현재 노드의 레이블만 표시하고 하위 노드를 표시하기 위해 자신을 호출합니다. 파일 이름: TreeMenu.vue, 내용은 다음과 같습니다:

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

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

기본 이벤트

모든

재귀 함수

와 마찬가지로 재귀를 종료하려면 기본 이벤트가 필요합니다. 그렇지 않으면 렌더링이 무한정 계속되어 결국 스택 오버플로가 발생합니다. 트리 메뉴에서 자식이 없는 노드에 도달하면 재귀를 중지하려고 합니다. v-if로 이를 수행할 수 있지만 우리는 v-for를 사용하기로 선택했습니다. 이는 암시적으로 구현됩니다. 노드 배열에 추가 정의가 없으면 트리 메뉴 구성 요소가 호출됩니다. template.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: [ 'label', 'nodes' ],
  name: 'tree-menu'
 }
 </script>

사용법

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

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

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

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

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

이는 TreeMenu를 통해 깊이 소품 정의를 추가함으로써 달성됩니다. 이 값을 사용하여 인라인 스타일을 변환과 동적으로 바인딩합니다. 각 노드의 레이블에 대해 변환: 변환 CSS 규칙을 사용하여 들여쓰기를 생성합니다. template.vue는 다음과 같이 수정됩니다**:**

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

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

rreee

참고: 깊이 값을 v 바인딩하여

String이 아닌 JavaScript숫자 유형인지 확인하세요. 펼치기/접기

재귀 데이터 구조는 클 수 있으므로 이를 표시하는 좋은 UI 트릭은 사용자가 필요에 따라 노드를 확장하거나 축소할 수 있도록 루트 노드를 제외한 모든 노드를 숨기는 것입니다.

이를 위해 로컬 속성 showChildren을 추가하겠습니다. 값이 False이면 하위 노드가 렌더링되지 않습니다. 이 값은 노드를 클릭하여 전환되어야 하므로 이를 관리하려면 클릭 이벤트 리스너 메소드인ToggleChildren을 사용해야 합니다. 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: [ 'label', 'nodes', 'depth' ],
  name: 'tree-menu',
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  }
 }
 </script>

요약

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!