Let’s talk about the storage location and usage of uniapp global public components

In the process of using uniapp for front-end development, we often need to use public components, such as custom navigation bars, bottom navigation bars, pop-up windows, etc. So, where should these global public components be placed? This article will introduce you to the storage location and usage of uniapp global public components.

1. The storage location of uniapp global public components

In uniapp, we can achieve the purpose of reusing the same component for different pages by creating public components. These components can be divided into global public components and local public components.

Global public components refer to components that can be used throughout the project, such as custom navigation bars, bottom navigation bars, pop-up windows, etc. Local public components refer to components that are only used within a single page.

So, where should the global public components be placed? Public components in uniapp can be stored in the following two locations:

1. /components/ directory

In the root directory of the uniapp project, you can see a file named components folder, this folder is where global public components are placed. Multiple subfolders can be created under this folder, each subfolder stores a common component. This approach allows global public components to be accessed by the entire project.

2. /pages/ directory

Global public components can also be placed in the /pages/ directory. This method treats the component as a page and uses the component by referencing the page in other pages.

2. How to use uniapp global public components

After storing the location of global public components, we can use these components in any page.

There are two ways to use global components:

1. Use the Vue.use() method to register globally

Through the Vue.use() method, We can register global public components in any vue component.

For example, in main.js we can register like this:

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

Then we can use the component like this in any page:

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

2. Directly Reference in the page

We can also directly reference global public components in the components of the page.

For example, when we want to use a global public component named MyDialog, we need to make the following import in the page:

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

Then in the component of the page, we can like Use global public components like normal components:

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

It should be noted that when using this method, we need to reference it in every page that needs to use the component.

Summary

In uniapp, there are two storage locations for global public components: the /components/ directory and the /pages/ directory. Among them, the /components/ directory is a common storage location, which can facilitate global call of components. In the /pages/ directory, the component is regarded as a page, and the component is used in other pages by referencing the page.

No matter which storage method is used, we can use global public components through the Vue.use() method or by directly referencing them in the component. Using global public components can greatly improve the code reuse rate and help us complete tasks more efficiently and quickly during development.

The above is the detailed content of Let’s talk about the storage location and usage of uniapp global public components. For more information, please follow other related articles on the PHP Chinese website!