Cara Mendaftar Arahan Tersuai dalam Nuxt 3

TL;DR

Buat fail pemalam dalam pemalam/ direktori anda, di mana kami akan mendapat akses kepada contoh apl Vue kami.

Kami boleh menentukan dan mendaftar arahan tersuai kami di sana:

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

Secara Terperinci

Dalam Vue, arahan ialah atribut khas pada elemen HTML yang digunakan untuk melanjutkan dan memanipulasi gelagatnya. Vue menyediakan beberapa arahan terbina dalam:

• v-bind - digunakan untuk mengikat atribut secara dinamik pada ungkapan JavaScript,
• v-on - digunakan untuk melampirkan pendengar acara pada elemen,
• v-if/v-else-if/v-else - digunakan untuk memaparkan elemen secara bersyarat,
• dan banyak lagi.

Untuk kes penggunaan yang lebih khusus dan lanjutan, Vue menyediakan cara untuk membuat arahan tersuai. Ini amat berguna untuk manipulasi DOM peringkat rendah.

Dalam apl Vue biasa, untuk mendaftar arahan tersuai di peringkat apl, kami boleh melampirkannya pada contoh apl kami seperti berikut:

const app = creatApp({});

app.directive('highlight', {
    mounted(el, binding) {
        el.style.backgroundColor = binding.value
    }
});

Kami kemudiannya boleh menggunakan arahan pada mana-mana elemen secara global dalam apl kami:

<p v-highlight="'yellow'">This text will be highlighted!</p>

Bagaimana dengan Nuxt?

Untuk mencapai kefungsian yang sama dalam Nuxt, kami memerlukan akses kepada contoh apl Vue kami dan kami boleh menggunakan pemalam untuk berbuat demikian.

Pemalam dalam Nuxt boleh digunakan untuk menambah kefungsian pada aplikasi di peringkat aplikasi Vue. Ia dimuatkan dan dilaksanakan apabila apl Vue dibuat, dan fail di dalam pemalam/ direktori apl Nuxt didaftarkan secara automatik sebagai pemalam oleh Nuxt.

Dalam Nuxt, kami boleh mencipta fail pemalam dalam pemalam/ direktori, yang boleh kami gunakan untuk mentakrif dan mendaftarkan arahan tersuai kami secara global:

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

Fungsi pemalam kami mempunyai akses kepada konteks apl Nuxt, yang mempunyai sifat vueApp yang mengandungi tika apl Vue kami. Kami boleh mendaftarkan terus arahan kami di hartanah ini dan menyediakannya secara global di seluruh apl kami.

Adalah penting untuk ambil perhatian bahawa, untuk mengelakkan isu dengan pemaparan sisi pelayan (SSR), fail pemalam kami tidak seharusnya mengandungi akhiran .client atau .server apabila digunakan untuk mendaftar arahan.

Itu sahaja. Terima kasih kerana membaca.

?? Mari Berhubung › Twitter · GitHub · LinkedIn

Atas ialah kandungan terperinci Cara Mendaftar Arahan Tersuai dalam Nuxt 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!