Vue를 사용하여 트리 구성 요소를 개발하는 방법

이 글에서는 컴포넌트의 재귀적 사용을 보여주는 Vue 트리 컴포넌트 개발을 위한 샘플 코드를 주로 소개합니다. 이제 나는 그것을 여러분과 공유하고 참고용으로 제공합니다.

이 글에서는 Vue 트리 컴포넌트의 샘플 코드를 소개하고 자세한 내용은 다음과 같습니다.

SemanticUI와 Vue를 사용하여 메뉴바 컴포넌트를 만드는 방법은 아마도 다음과 같습니다.

<template> 
  <p class="ui menu"> 
   <template v-for="item in leftItems"> 
    <a " v-if="!item.children" @click="item.click"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <p class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </p> 
    </a>  
   //如果有有children则说明是下拉菜单项，然后递归调用自身 
    <template v-else="item.children.length > 0"> 
     <p class="ui dropdown item"> 
      <i class="{{ item.icon }} icon" v-if="item.icon"></i>   
      <p class="text"> {{item.text}}</p> 
      <menubar :items="item.children" ></menubar> 
     </p> 
    </template> 
   </template> 
  //显示在右侧的菜单项，也是递归调用自身 
   <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar> 
  </p> 
</template>

사용할 때. 상위 구성 요소 앱이 메뉴 표시줄 구성 요소로 사용되는 경우 항목 데이터를 데이터에 정의해야 합니다. 예를 들어

menubar:[ 
     {id:"a",text:"主页1",icon:"home",tips:"提示",label:"33",labelColor:"red",url:"#"}, 
     {id:"b",text:"菜单",icon:"edit",tips:"提示",url:"#",children:[ 
       {id:"a",text:"菜单1",click:"test3",icon:"home",url:"#"}, 
       {id:"a",text:"菜单2",click:"test3",icon:"home",url:"#"} 
     ]}, 
     {id:"bb",text:"编辑",tab:"a",icon:"user",vlink:"#"}, 
     {id:"bb",text:"文件",tab:"b",icon:"user",click:"test1"}, 
     {id:"bb",text:"帮助",tab:"c",icon:"help",click:"test2"}, 
     {id:"bb",text:"工具",icon:"user",url:"www.baidu.com"}, 
     {id:"c",text:"设置",icon:"home",tips:"提示",enabled:true,color:"blue",url:"#",right:true,label:"",children:[ 
        {id:"bbb",text:"配置",icon:"home",tips:"提示",click:"test3"}, 
        {id:"adsd",text:"退出",icon:"home",tips:"提示",vlink:"/workdesk",url:"#"} 
        ] 
      } 
   ]

의 클릭 이벤트는 도구 모음을 클릭할 때 정의됩니다.

events:{ 
  eventa:function(){....}, 
  eventb:function(){....}, 
}

도구 모음 구성 요소는 내부 하위 구성 요소를 포함하여 들어오는 항목을 기반으로 생성됩니다. 최종 도구 모음 구성 요소의 구조는 트리 구조입니다. 예를 들면 다음과 같습니다.

MenuBar
--MenuBar                                                                                                                              각 메뉴바에는 고유한 컨텍스트가 있으므로 하위 구성 요소 메뉴바의 클릭 이벤트가 트리거되면 이벤트에 정의된 이벤트는 최상위 앱 구성요소는 호출되지 않고 상위 메뉴바의 이벤트만 호출됩니다.

그러나 사용자 경험 측면에서 볼 때 툴바 구성 요소의 클릭 이벤트 정의는 앱 구성 요소의 이벤트에 정의되어야 한다는 것은 명백합니다. menubar:[]가 메뉴 항목을 정의할 때 중첩 수준에 관계없이 이벤트 트리거가 상단 메뉴 모음의 상위 항목까지 버블링될 수 있기를 바랍니다.
따라서 이 메커니즘을 구현하기 위해 현재 구성 요소 간 통신 메커니즘이 사용됩니다.

<a @click="onMenuItemClick(item,$event)" data-tab="{{item.tab}}" v-link="item.vlink" href="{{item.url}}" rel="external nofollow" v-if="!item.children" :class="[{&#39;active&#39;:item.active==true,&#39;disabled&#39;:item.enabled==false},item.color,&#39;item&#39;]" title="{{item.tips}}"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <p class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </p> 
    </a>

위는 @click="onMenuItemClick(item,$event)"

methods:{ 
  onMenuItemClick:function(item,$event){    
   if(this.subMenu){ 
    this.$dispatch("menuItemClick",item,$event)  
   }else{ 
    if(item.click){ 
     this.$parent.$emit(item.click,item) 
    } 
   }   
  } 
 }

onMenuItemClick이 트리거될 때 이벤트를 정의합니다. subMenu는 클릭 이벤트가 처리되는 방식을 확인하는 데 사용됩니다. Menubar가 하위 메뉴 표시줄로 처리되면 이벤트를 직접 위쪽으로 버블링하고, 그렇지 않으면 이벤트가 상위 상위 구성 요소에서 트리거됩니다.

코드 복사

코드는 다음과 같습니다.

menubar 구성 요소 내부를 호출할 때 submenu=true를 전달하고 menuItemClick 이벤트를 수신합니다. menuItemClick 이벤트 코드는 다음과 같습니다.

events:{ 
  menuItemClick:function(item,$event){ 
   if(!this.subMenu){ 
    this.$parent.$emit(item.click,item) 
   }else{ 
    return true 
   } 
  } 
 },

요약하자면:

구성 요소를 처리할 때 드롭다운 메뉴와 같은 중첩 구조 도구 모음, 트리 구성 요소 등을 사용할 때 각 구성 요소에는 고유한 독립적인 컨텍스트가 있으므로 구성 요소 통신 메커니즘을 사용하여 내부 구성 요소 간의 통신을 처리해야 합니다.

하지만 이러한 처리 방법은 여전히 ​​상당히 번거롭다고 생각합니다. 이상적으로 가장 공식적인 방법은 구성 요소가 상위 구성 요소의 컨텍스트를 직접 사용할 수 있는 메커니즘을 제공하는 것입니다. 예를 들면 다음과 같습니다.

<MenuBar> 
 <button scoped="false"></button> 
<button scoped="false"></button> 
</MenuBar>

이런 식으로 , 위의 버튼에는 자체 Context가 없으며 상위 구성 요소의 컨텍스트를 직접 도입할 수 있으므로 이 패턴은 많은 상황에서 사용해야 합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Angular4에서 CLI 설치 및 사용에 대한 튜토리얼

Vue2를 사용하여 JSON 트리를 구현하는 방법(자세한 튜토리얼)

vuex에서 유휴 상태 재설정을 구현하는 방법

위 내용은 Vue를 사용하여 트리 구성 요소를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!