uniapp 글로벌 퍼블릭 컴포넌트의 저장 위치와 사용법에 대해 이야기해보겠습니다.

프런트엔드 개발을 위해 uniapp을 사용하는 과정에서 커스텀 네비게이션 바, 하단 네비게이션 바, 팝업 창 등과 같은 공용 컴포넌트를 사용해야 하는 경우가 종종 있습니다. 그렇다면 이러한 전역 공용 구성 요소를 어디에 배치해야 할까요? 이 글에서는 uniapp 글로벌 퍼블릭 컴포넌트의 저장 위치와 사용법을 소개합니다.

1. uniapp의 글로벌 퍼블릭 컴포넌트 저장 위치

uniapp에서는 퍼블릭 컴포넌트를 생성하여 동일한 컴포넌트를 여러 페이지에 재사용한다는 목적을 달성할 수 있습니다. 이러한 구성 요소는 전역 공용 구성 요소와 로컬 공용 구성 요소로 나눌 수 있습니다.

전역 공용 구성 요소는 사용자 정의 탐색 모음, 하단 탐색 모음, 팝업 창 등 프로젝트 전반에 걸쳐 사용할 수 있는 구성 요소를 의미합니다. 로컬 공용 구성 요소는 단일 페이지 내에서만 사용되는 구성 요소를 나타냅니다.

그렇다면 전역 공용 구성 요소를 어디에 배치해야 할까요? uniapp의 퍼블릭 컴포넌트는 다음 두 위치에 저장될 수 있습니다:

1. /comComponents/ 디렉토리

uniapp 프로젝트의 루트 디렉토리에는 글로벌 퍼블릭 컴포넌트가 위치하는 컴포넌트라는 폴더가 있습니다. 구성 요소의 위치. 이 폴더 아래에 여러 하위 폴더를 만들 수 있으며 각 하위 폴더에는 공통 구성 요소가 저장됩니다. 이 접근 방식을 사용하면 전체 프로젝트에서 전역 공용 구성 요소에 액세스할 수 있습니다.

2. /pages/ 디렉터리

전역 공용 구성 요소는 /pages/ 디렉터리에도 배치할 수 있습니다. 이 방법은 구성 요소를 페이지로 취급하고 다른 페이지의 페이지를 참조하여 구성 요소를 사용합니다.

2. uniapp 글로벌 퍼블릭 컴포넌트 사용 방법

글로벌 퍼블릭 컴포넌트의 위치를 ​​저장한 후 모든 페이지에서 해당 컴포넌트를 사용할 수 있습니다.

전역 구성 요소를 사용하는 방법에는 두 가지가 있습니다.

1. Vue.use() 메서드를 사용하여 전역적으로 등록합니다.

Vue.use() 메서드를 사용하면 모든 vue 구성 요소에 전역 공용 구성 요소를 등록할 수 있습니다.

예를 들어, main.js에서 다음과 같이 등록할 수 있습니다:

import BackTop from '@/components/BackTop.vue'
Vue.use(BackTop)

그런 다음 모든 페이지에서 다음과 같은 구성 요소를 사용할 수 있습니다.

<template>
  <div>
    <back-top></back-top>
  </div>
</template>

2. 페이지에서 직접 참조

다음에서 직접 참조할 수도 있습니다. 페이지 전역 공용 구성 요소는 구성 요소에서 참조됩니다.

예를 들어 MyDialog라는 전역 공용 구성 요소를 사용하려면 페이지에서 다음 가져오기를 수행해야 합니다.

import MyDialog from '@/components/MyDialog.vue'

그런 다음 페이지 구성 요소에서 일반 구성 요소처럼 전역 공용 구성 요소를 사용할 수 있습니다. :

<template>
  <div>
    <my-dialog></my-dialog>
  </div>
</template>

이 방법을 사용할 때 컴포넌트를 사용해야 하는 모든 페이지에서 이를 참조해야 한다는 점에 유의하세요.

요약

uniapp에는 전역 공용 구성 요소에 대한 두 가지 저장 위치가 있습니다: /comComponents/ 디렉터리와 /pages/ 디렉터리. 그 중 /comComponents/ 디렉토리는 공통 저장 위치로, 컴포넌트의 글로벌 호출을 용이하게 할 수 있습니다. /pages/ 디렉터리에서는 해당 컴포넌트를 하나의 페이지로 간주하고, 해당 페이지를 참조하여 다른 페이지에서 사용됩니다.

어떤 저장 방법을 사용하든 Vue.use() 메서드를 통해 전역 공용 구성 요소를 사용하거나 구성 요소에서 직접 참조하여 사용할 수 있습니다. 전역 공용 구성 요소를 사용하면 코드 재사용률이 크게 향상되고 개발 중에 작업을 보다 효율적이고 빠르게 완료하는 데 도움이 됩니다.

위 내용은 uniapp 글로벌 퍼블릭 컴포넌트의 저장 위치와 사용법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!