Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen menu berbilang peringkat

Dengan pembangunan teknologi bahagian hadapan, semakin banyak syarikat dan pembangun mula menggunakan rangka kerja Vue.js untuk pembangunan web. Vue.js ialah rangka kerja JavaScript ringan yang mudah digunakan, cekap dan mempunyai ekosistem yang berkuasa. Dalam versi Vue3 terkini, prestasi Vue.js telah dipertingkatkan dengan banyak, menjadikannya lebih sesuai untuk aplikasi peringkat perusahaan dan projek berskala besar.

Dalam Vue.js, pemalam ialah cara untuk melanjutkan fungsi Vue.js. Mereka boleh menambah kefungsian peringkat global atau menambah komponen, arahan, penapis, dll. pada tika Vue.js. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen menu berbilang peringkat.

1. Pasang Vue.js

Mula-mula, anda perlu memasang rangka kerja Vue.js melalui npm. Jalankan arahan berikut dalam terminal (baris arahan):

npm install vue@next

2. Buat pemalam Vue.js

Seterusnya, kami akan mencipta pemalam Vue.js untuk menambahkan komponen menu berbilang peringkat pada contoh Vue.js. Cipta folder menu di bawah folder /src, buat fail menu.js di bawah folder dan tambahkan kod berikut di dalamnya:

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

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

export default MenuPlugin

Dalam kod di atas, kami mula-mula mengimport komponen Vue.js dan Menu . Kemudian, buat objek bernama MenuPlugin yang mempunyai kaedah bernama install. Kaedah pemasangan digunakan untuk mendaftarkan pemalam dalam tika Vue.js, di mana Vue.component('menu', Menu) bermakna setiap tika Vue.js akan mempunyai komponen bernama menu yang nilainya ialah Menu.

3. Buat komponen menu berbilang peringkat

Seterusnya, kita perlu mencipta komponen menu berbilang peringkat. Cipta fail Menu.vue di bawah folder /src/menu dan tambahkan kod berikut di dalamnya:

<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>

Dalam kod di atas, kami menggunakan komponen rekursif Vue.js untuk mencipta menu berbilang peringkat. Struktur HTML yang terhasil kelihatan seperti contoh berikut:

<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. Menambah komponen menu berbilang peringkat menggunakan pemalam

Sekarang kita mempunyai pemalam dan komponen, semua yang kita keperluan ialah Tambah mereka pada contoh Vue.js. Tambahkan kod berikut pada fail /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')

Dalam kod di atas, kami mengimport komponen Vue.js dan App, serta pemalam MenuPlugin yang baru dibuat. Tambahkannya pada contoh Vue.js menggunakan kaedah Vue.use(). Akhir sekali, kami mencipta contoh Vue.js, merujuk komponen Apl dalam kaedah pemaparannya dan melekapkannya pada elemen dengan apl id.

Kini, kami telah melengkapkan pengkapsulan komponen menu berbilang peringkat. Anda boleh menggunakannya dalam fail App.vue, seperti yang ditunjukkan di bawah:

<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>

Dalam kod di atas, kami menghantar sifat bernama menu kepada komponen menu dan nilainya ialah tatasusunan objek, mewakili berbilang- peringkat menu peringkat, tajuk dan submenu. Perhatikan penggunaan komponen rekursif untuk mengendalikan submenu.

5. Kesimpulan

Pada ketika ini, kami telah berjaya menggunakan pemalam Vue.js untuk merangkum komponen menu berbilang peringkat. Melalui contoh ini, anda boleh belajar cara membuat pemalam dan komponen Vue.js serta cara menggunakannya dalam tika Vue.js. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen menu berbilang peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!