uniappx使用自定义组件的三种方式

admin

一、选项式（页面导入方式）：

在uniapp中基于js规范的书写代码方式就是选项式的，如下代码示例：

1. <template>
   
2.   <view class="page">
   
3.     <CompForAppUse class="component-for-app-use" />
   
4.   </view>
   
5. </template>
   
6. 
   
7. <script lang="uts">
   
8. import CompForAppUse from '@/components/CompForAppUse.uvue'
   
9. 
   
10. export default {
    
11.   components: {
    
12.     CompForAppUse
    
13.   }
    
14. }
    
15. </script>
    
16. 
    

复制代码

这里以导入自定义组件为例，我们在export default{}外部import导入了ComForAppUse组件，必须要在export default{}内部定义components对象，以CompForAppUse为元素。当然也可以通过在page.json中定义easycom方式使用自定义组件。

二、组合式（页面导入方式）：
这是unaippx在Vue3中新增的书写方式，代码示例如下：

1. <template>
   
2.   <view class="page">
   
3.     <CompForAppUse class="component-for-app-use" />
   
4.   </view>
   
5. </template>
   
6. 
   
7. <script setup lang="uts">
   
8. import CompForAppUse from '@/components/CompForAppUse.uvue'
   
9. </script>
   
10. 
    

复制代码

我们可以看到在<script>中增加了 setup ，这就是声明组合式写法，在组合式写法中，我们无需export default组件，直接通过import导入组件就可以直接使用。

三、全局注册方式：
我们在main.uts中全局注册组件，代码如下：

1. import App from './App.uvue'
   
2. import CompForAppComponent from '@/components/CompForAppComponent.uvue'
   
3. export function createApp() {
   
4.   const app = createSSRApp(App)
   
5.   app.component('CompForAppComponent', CompForAppComponent)
   
6. }
   

复制代码

然后我们在页面中直接可以使用组件，代码如下：

1. <template>
   
2.   <view class="page">
   
3.     <CompForAppComponent class="component-for-app-component" />
   
4.   </view>
   
5. </template>
   
6. 
   

复制代码