Vue를 사용하여 트리 구성 요소를 개발하는 방법
- 亚连원래의
- 2018-06-19 14:31:221788검색
이 글에서는 컴포넌트의 재귀적 사용을 보여주는 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="[{'active':item.active==true,'disabled':item.enabled==false},item.color,'item']" 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가 하위 메뉴 표시줄로 처리되면 이벤트를 직접 위쪽으로 버블링하고, 그렇지 않으면 이벤트가 상위 상위 구성 요소에서 트리거됩니다.
코드 복사
코드는 다음과 같습니다.68f6a2bf338ff7cb1ee408bb7bbd12a9 0"> 61ef41fb981a5b87a72024a468870e1fmenubar 구성 요소 내부를 호출할 때 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 트리를 구현하는 방법(자세한 튜토리얼)
위 내용은 Vue를 사용하여 트리 구성 요소를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!