Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve a tree component in Vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve a tree component in Vue" can help you solve the problem.

To make a menubar component using SemanticUI and vue, the implementation looks something like this:

0 "> {{item.text}} / / the menu item displayed on the right is also a recursive call to itself.

When in use, if the parent component app uses the menubar component, then the items data needs to be defined in data, for example:

Menubar: [{id: "a", text: "Home 1", icon: "home", tips: "prompt", label: "33", labelColor: "red", url: "#"}, {id: "b", text: "menu", icon: "edit", tips: "Tip", url: "#", children: [{id: "a", text: "menu 1", click: "test3", icon: "home", url: "#"} {id: "a", text: "menu 2", click: "test3", icon: "home", url: "#}]}, {id:" bb ", text:" Edit ", tab:" a ", icon:" user ", vlink:" # "}, {id:" bb ", text:" File ", tab:" b ", icon:" user ", click:" test1 "}, {id:" bb ", text:" help " Tab: "c", icon: "help", click: "test2"}, {id: "bb", text: "tools", icon: "user", url: "www.baidu.com"}, {id: "c", text: "Settings", icon: "home", tips: "Tips", enabled:true,color: "blue", url: "#", right:true,label: ", children: [{id:" bbb ", text:" configuration " Icon: "home", tips: "prompt", click: "test3"}, {id: "adsd", text: "exit", icon: "home", tips: "prompt", vlink: "/ workdesk", url: "#"}]]

The click event inside defines the event when clicked in the toolbar. Ideally, the event should be defined in the events of the parent component app, like this:

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

The toolbar component is generated based on the incoming items, including the child components inside. In the end, the structure of the toolbar component is a tree, such as this:

MenuBar

-- MenuBar

-MenuBar

-MenuBar

-- Menubar

Because each Menubar in each toolbar component has its own context, when the click event of the child component Menubar is triggered, it does not call the event defined in the top-level app component events, but only the events event of the parent Menubar.

But in terms of user experience, it is clear that the click event definition of the toolbar component should be defined in the events of the app component. We hope that when menubar: [] defines a menu item, no matter how many levels of nesting, the event trigger can bubble to the parent of the top menubar.

Therefore, to implement this mechanism, it is currently implemented by the communication mechanism between components:

{{item.text}} {{item.label}}

An event @ click= "onMenuItemClick (item,$event)" is defined above

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

When the onMenuItemClick is triggered, we confirm how to handle the click event according to the incoming subMenu. If the Menubar is handled as a submenu bar, we will directly bubble up the event, otherwise the event will be triggered in the upper parent component.

The copy code is as follows:

Pass in submenu=true when called inside the menubar component, and listen for the event menuItemClick,menuItemClick event code like this:

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

A brief summary:

When dealing with components with nested structures, such as toolbars with drop-down menus, tree components, etc., because the components have their own independent context, the component communication mechanism must be used to deal with the communication between the internal components.

But in this way, I think it is troublesome and ideal. I think the best official way is to provide a mechanism for components to directly use the context of the parent component, such as:

In this way, the above button does not have its own context, but can be introduced directly into the context of the parent component, so the pattern should be used in many situations.

This is the end of the introduction to "how to implement a tree component in Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.