VUE3 開発入門チュートリアル: Vue.js プラグインを使用してマルチレベル メニュー コンポーネントをカプセル化する

フロントエンド テクノロジーの発展に伴い、Web 開発に 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. 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.component('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 インスタンスを作成し、その 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 という名前のプロパティをメニュー コンポーネントに渡します。その値は、複数の要素を表すオブジェクト配列です。レベル メニューのレベル、タイトル、サブメニュー。サブメニューを処理するために再帰コンポーネントが使用されていることに注意してください。

5. 結論

この時点で、Vue.js プラグインを使用してマルチレベル メニュー コンポーネントをカプセル化することに成功しました。この例を通じて、Vue.js プラグインとコンポーネントを作成する方法、およびそれらを Vue.js インスタンスで使用する方法を学ぶことができます。この記事がお役に立てば幸いです。

以上がVUE3 開発入門チュートリアル: Vue.js プラグインを使用してマルチレベル メニュー コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。