首页uniapp 引入组件

uniapp 引入组件

时间: 2025-02-17 20:11:18 浏览: 43

### 如何在 UniApp 中引入和使用自定义组件 #### 创建自定义组件为了创建一个自定义组件，在 `components` 文件夹内建立一个新的文件夹来存放该特定组件的相关文件，比如命名为 `myComponent`。在这个新创建的文件夹里，至少应该有一个 `.vue` 结束的单文件组件[^4]。 ```html <template> <view class="custom-component">  </view> </template> <script> export default { name: 'MyComponent', props: {}, data() { return {}; }, }; </script> <style scoped> .custom-component { /* 样式 */ } </style> ``` #### 注册并使用自定义组件当准备好了要使用的自定义组件之后，可以在目标页面或父级组件中通过 `usingComponents` 字段声明所需引用的子组件名称及其相对路径[^3]： ```json { "usingComponents": { "my-component": "/components/myComponent/myComponent" } } ``` 接着便能够在对应的 `<template>` 部分像下面这样简单地利用标签形式调用已注册好的组件了[^1]： ```html  <my-component></my-component> ``` 对于希望在整个应用范围内都可用而无需每次都单独导入的情况，则可以考虑配置全局自动导入机制或是借助构建工具实现自动化处理[^5]。

阅读全文