Nuxt 3에서 사용자 정의 지시어를 등록하는 방법

TL;DR

Vue 앱 인스턴스에 액세스할 수 있는 플러그인/ 디렉토리에 플러그인 파일을 만듭니다.

여기에서 사용자 정의 지시문을 정의하고 등록할 수 있습니다.

// ~/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
});

상세히

Vue에서 지시문은 동작을 확장하고 조작하는 데 사용되는 HTML 요소의 특수 속성입니다. Vue는 여러 내장 지시어를 제공합니다:

• v-bind - 속성을 JavaScript 표현식에 동적으로 바인딩하는 데 사용됩니다.
• v-on - 이벤트 리스너를 요소에 연결하는 데 사용됩니다.
• v-if/v-else-if/v-else - 요소를 조건부로 렌더링하는 데 사용됩니다.
• 그 밖에도 많은 것들이 있습니다.

보다 구체적이고 고급 사용 사례를 위해 Vue는 사용자 정의 지시어를 생성하는 방법을 제공합니다. 이는 낮은 수준의 DOM 조작에 특히 유용할 수 있습니다.

일반 Vue 앱에서는 앱 수준에서 사용자 정의 지시어를 등록하기 위해 다음과 같이 앱 인스턴스에 연결할 수 있습니다.

const app = creatApp({});

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

그런 다음 앱 내에서 전 세계적으로 모든 요소에 대해 지시문을 사용할 수 있습니다.

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

Nuxt에서는 어떻습니까?

Nuxt에서 동일한 기능을 달성하려면 Vue 앱 인스턴스에 액세스해야 하며 이를 위해 플러그인을 사용할 수 있습니다.

Nuxt의 플러그인을 사용하여 Vue 앱 수준에서 애플리케이션에 기능을 추가할 수 있습니다. Vue 앱이 생성될 때 로드 및 실행되며, Nuxt 앱의plugins/ 디렉토리에 있는 파일은 Nuxt에 의해 자동으로 플러그인으로 등록됩니다.

Nuxt에서는 플러그인/ 디렉토리에 플러그인 파일을 생성하여 사용자 정의 지시어를 전역적으로 정의하고 등록하는 데 사용할 수 있습니다.

// ~/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
});

우리 플러그인 함수는 Vue 앱 인스턴스가 포함된 vueApp 속성이 있는 Nuxt 앱 컨텍스트에 액세스할 수 있습니다. 이 속성에 대한 지시문을 직접 등록하고 앱 전체에서 전 세계적으로 사용할 수 있도록 할 수 있습니다.

서버 측 렌더링(SSR) 문제를 방지하려면 지시문을 등록하는 데 사용할 때 플러그인 파일에 .client 또는 .server 접미사가 포함되어서는 안 된다는 점에 유의하는 것이 중요합니다.

그렇습니다. 읽어주셔서 감사합니다.

?‍? 연결하자 › Twitter · GitHub · LinkedIn

위 내용은 Nuxt 3에서 사용자 정의 지시어를 등록하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!