VUE3開發入門教學：使用Vue.js外掛程式封裝多層選單元件-Vue.js-PHP中文網

VUE3開發入門教學：使用Vue.js外掛程式封裝多層選單元件

WBOY

發布： 2023-06-15 19:02:52

原創

1087 人瀏覽過

隨著前端技術的發展，越來越多的公司和開發者開始使用Vue.js框架進行web開發。 Vue.js是一種輕量級的JavaScript框架，具有易用性、高效性和強大的生態系統。在最新的Vue3版本中，Vue.js的效能得到了大幅提升，更加適用於企業級應用和大型專案。

在Vue.js中，外掛程式是一種拓展Vue.js功能的方式。它們可以新增全域層級的功能或新增一個元件、指令、篩選器等到Vue.js實例中。本文將介紹如何使用Vue.js外掛程式封裝多層級的選單元件。

安裝Vue.js

首先，需要透過npm安裝Vue.js框架。在終端機(命令列)執行以下命令：

npm install vue@next

登入後複製

建立Vue.js插件

接下來，我們將建立一個Vue.js插件，用於新增一個多層選單元件到Vue.js實例中。在/src資料夾下建立一個menu資料夾，在該資料夾下建立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元件。然後，建立一個名為MenuPlugin的對象，該物件有一個名為install的方法。 install方法用於在Vue.js實例中註冊該插件，其中Vue.component('menu', Menu)表示每個Vue.js實例都將擁有一個名為menu的元件，其值為Menu。

建立多層級選單元件

接下來，我們需要建立一個多層級選單元件。在/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>

登入後複製

使用外掛程式添加多層選單元件

現在，我們已經有了外掛程式和元件，需要的只是將它們加入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實例，在其render方法中引用了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的屬性到menu元件中，其值為一個物件數組，表示多層選單的層次、標題和子選單。注意使用遞歸組件來處理子選單。