VUE3 개발 입문 튜토리얼: Vue.js 플러그인을 사용하여 다중 레벨 메뉴 구성요소 캡슐화

프런트 엔드 기술의 발전으로 점점 더 많은 회사와 개발자가 웹 개발에 Vue.js 프레임워크를 사용하기 시작했습니다. Vue.js는 사용하기 쉽고 효율적이며 강력한 생태계를 갖춘 경량 JavaScript 프레임워크입니다. 최신 Vue3 버전에서는 Vue.js의 성능이 크게 향상되어 엔터프라이즈급 애플리케이션 및 대규모 프로젝트에 더욱 적합해졌습니다.

Vue.js에서 플러그인은 Vue.js의 기능을 확장하는 방법입니다. 전역 수준 기능을 추가하거나 Vue.js 인스턴스에 구성 요소, 지시문, 필터 등을 추가할 수 있습니다. 이 기사에서는 Vue.js 플러그인을 사용하여 다중 레벨 메뉴 구성요소를 캡슐화하는 방법을 소개합니다.

1. Vue.js 설치

먼저 npm을 통해 Vue.js 프레임워크를 설치해야 합니다. 터미널(명령줄)에서 다음 명령을 실행합니다.

npm install vue@next

2. Create Vue.js 플러그인

다음으로 Vue.js 플러그인을 생성하여 Vue에 다중 레벨 메뉴 구성 요소를 추가하겠습니다. js 인스턴스. /src 폴더 아래에 메뉴 폴더를 생성하고, 그 폴더 아래에 menu.js 파일을 생성하고, 그 안에 다음 코드를 추가합니다.

import Vue from 'vue'
import Menu from './Menu.vue'

const MenuPlugin = {
    install(Vue, options) {
        Vue.component('menu', Menu)
    }
}

export default MenuPlugin

위 코드에서는 먼저 Vue.js와 Menu 컴포넌트를 가져옵니다. 그런 다음 install이라는 메서드가 있는 MenuPlugin이라는 개체를 만듭니다. install 메소드는 Vue.js 인스턴스에 플러그인을 등록하는 데 사용됩니다. 여기서 Vue.comComponent('menu', Menu)는 각 Vue.js 인스턴스에 값이 Menu인 menu라는 구성 요소가 있음을 의미합니다.

3. 다중 레벨 메뉴 구성 요소 만들기

다음으로 다단계 메뉴 구성 요소를 만들어야 합니다. /src/menu 폴더 아래에 Menu.vue 파일을 생성하고 그 안에 다음 코드를 추가합니다:

<template>
    <div>
        <ul>
            <li v-for="item in menu" :key="item.id">
                {{ item.title }}
                <menu v-if="item.children" :menu="item.children"></menu>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'menu',
    props: {
        menu: {
            type: Array,
            required: true
        }
    }
}
</script>

위 코드에서는 Vue.js의 재귀 구성 요소를 사용하여 다중 레벨 메뉴를 생성합니다. 결과 HTML 구조는 다음 예와 같습니다.

<ul>
    <li>
        一级菜单1
        <ul>
            <li>
                二级菜单1
                <ul>
                    <li>
                        三级菜单1
                    </li>
                    <li>
                        三级菜单2
                    </li>
                </ul>
            </li>
            <li>
                二级菜单2
            </li>
        </ul>
    </li>
    <li>
        一级菜单2
    </li>
</ul>

4. 플러그인을 사용하여 다중 레벨 메뉴 구성 요소 추가

이제 플러그인과 구성 요소가 있으므로 Vue.js 인스턴스에 추가하기만 하면 됩니다. . /src/main.js 파일에 다음 코드를 추가합니다.

import Vue from 'vue'
import App from './App.vue'
import MenuPlugin from './menu/menu'

Vue.config.productionTip = false

Vue.use(MenuPlugin)

new Vue({
    render: h => h(App)
}).$mount('#app')

위 코드에서는 Vue.js 및 App 구성 요소와 새로 생성된 MenuPlugin 플러그인을 가져왔습니다. Vue.use() 메서드를 사용하여 Vue.js 인스턴스에 추가합니다. 마지막으로 Vue.js 인스턴스를 생성하고, 렌더링 메서드에서 App 구성 요소를 참조하고, ID가 app인 요소에 탑재됩니다.

이제 다단계 메뉴 구성요소의 캡슐화가 완료되었습니다. 아래와 같이 App.vue 파일에서 사용할 수 있습니다.

<template>
  <div id="app">
    <menu :menu="menu"></menu>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      menu: [
        {
          id: 1,
          title: '一级菜单1',
          children: [
            {
              id: 11,
              title: '二级菜单1',
              children: [
                {
                  id: 111,
                  title: '三级菜单1'
                },
                {
                  id: 112,
                  title: '三级菜单2'
                }
              ]
            },
            {
              id: 12,
              title: '二级菜单2'
            }
          ]
        },
        {
          id: 2,
          title: '一级菜单2'
        }
      ]
    }
  }
}
</script>

위 코드에서는 menu라는 속성을 메뉴 구성 요소에 전달하고 해당 값은 다중 항목의 계층 구조와 제목을 나타내는 개체 배열입니다. -레벨 메뉴 및 하위 메뉴. 하위 메뉴를 처리하기 위해 재귀 구성 요소를 사용하는 것에 유의하세요.

5. 결론

이 시점에서 우리는 Vue.js 플러그인을 사용하여 다중 레벨 메뉴 구성 요소를 성공적으로 캡슐화했습니다. 이 예제를 통해 Vue.js 플러그인 및 구성 요소를 생성하는 방법과 이를 Vue.js 인스턴스에서 사용하는 방법을 배울 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 VUE3 개발 입문 튜토리얼: Vue.js 플러그인을 사용하여 다중 레벨 메뉴 구성요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!