Shulou(Shulou.com)06/03 Report--

This article will explain in detail how the whole process of vue3 recursive component encapsulation is, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Preface

When I was writing a project today, I encountered the need for a custom right-click menu. There are also submenus in the menu, so recursive components are used at this time. So write this article to document your own process of writing recursive components.

1. Recursive components

A    recursive component, as its name implies, calls itself within the component itself. So we first build a component and call ourselves internally. A common recursive component is the tree component that is often used in our projects. The following is the source code of a recursive component that I have implemented to meet the requirements of the project.

{{item.text}} import {defineComponent, ref} from "vue"; import {CaretRightOutlined} from'@ ant-design/icons-vue' Export default defineComponent ({name:'list-comp', props: {listData: {type:Array, default: () = > []}}, components: {CaretRightOutlined}, emits: ["hideContextMenu"], setup (props, {emit}) {/ / Click event const handleClick= (event, {text) CallBack}) = > {emit ('hideContextMenu') / / callBack is the callback function passed in by yourself. If it is passed in, call the custom callback function if (callBack) {callBack (); return;}} const hideContextMenuEvent= () = > {emit ('hideContextMenu') } / / used to identify the currently selected menu item const childrenMenuIndex=ref (- 1); const eventNames= ['click','contextmenu'] OnMounted (() = > {eventNames.forEach (eventName= > window.addEventListener (eventName,hideContextMenuEvent))}) onBeforeUnmount (() = > {eventNames.forEach (eventName= > window.removeEventListener (eventName,hideContextMenuEvent))}) return {handleClick, childrenMenuIndex, hideContextMenuEvent}})

Matters needing attention

Within the recursive component itself, when calling itself, you need to receive the custom event sent by yourself through emit on the recursive component, and then trigger the custom event again through emit inside the component.

By listening to click events, you can trigger custom events through emit and listen outside the component. You can also build your own callback directly when passing data to the component through props, so that you don't have to trigger custom events through emit.

When clicking on a menu item in a recursive component, you need to have the recursive component destroyed. So we need to destroy the component through event bubbling listening for events such as click,contextmenu in the recursive component, and then trigger custom events through emit for the outside world to receive, so as to achieve the purpose of destroying the component.

When the click event is called inside a recursive component, you need to prevent the event from bubbling and the default event. You can add click.prevent.stop after the click event to prevent event bubbling and default events.

2. Right-click the menu component

   my project uses the form of components to implement the right-click menu. Of course, it can also be achieved in the form of plug-ins. My right-click menu here is essentially the secondary encapsulation of recursive components. In fact, we can use recursive components as right-click menus without secondary encapsulation.

Import {defineComponent} from "vue" Import ListComp from ". / list-comp.vue" export default defineComponent ({name: "contextMenu", components: {ListComp}, props: {styleObj: {type:Object, default: () = > {}}, menuData: {type:Array, default: () = > []}}, emits: ['closeContextMenu'] Setup (props, {emit}) {const windowClickHandler= () = > {emit ('closeContextMenu')} Return {windowClickHandler,})

Matters needing attention

When you invoke the right-click menu in a project, you need to disable the right-click menu event of window itself. Then implement your own custom menu event. The implementation code is as follows.

Const showContextMenu= (event) = > {/ / disable default events and prevent bubbling event.stopPropagation (); event.preventDefault (); state.showContextMenu=true State.styleObj= {left:event.clientX+ "px", top:event.clientY+'px'}} / / listens to the right-click menu event onMounted (() = > {window.addEventListener ('contextmenu',showContextMenu)}) onBeforeUnmount (() = > {window.removeEventListener (' contextmenu',showContextMenu)}) about the encapsulation of vue3 recursive components. I hope the above content can be of some help to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

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.