uni-app自定义组件及拓展(uni-ui)组件的使用

UniApp 是一个基于 Vue.js 的跨平台应用框架，可以用来开发同时运行在多个平台（如微信小程序、支付宝小程序、App等）的应用程序。在 UniApp 中，组件的使用与 Vue.js 中的组件使用基本类似，但需要考虑跨平台兼容性。

寒冰609

3260人浏览 · 2024-04-16 18:34:02

寒冰609 · 2024-04-16 18:34:02 发布

UniApp 组件的基本使用方法：

1. 创建组件文件

在 UniApp 项目中创建一个新的组件，通常将组件文件保存在 components 文件夹下。

在 components 文件夹下创建组件文件夹： 如果 components 文件夹不存在，需要先创建它。然后在 components 文件夹下创建一个新的文件夹，用于保存新组件的相关文件。
创建组件的 Vue 文件： 在新创建的组件文件夹中，创建一个以 .vue 结尾的 Vue 单文件组件，其中包含了组件的模板、脚本和样式。

<!-- my-component.vue -->
<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp!'
    };
  }
}
</script>

<style scoped>
/* 样式只在当前组件有效 */
</style>

2. 在页面中使用组件

在需要使用该组件的页面中，通过相对路径引入该组件，并在页面的 components 部分进行注册。

例如，在 pages/index/index.vue 中引入和注册 MyComponent 组件：

<!-- pages/index/index.vue -->
<template>
  <view>
    <my-component />
  </view>
</template>

<script>
import MyComponent from '@/components/my-component.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

<style scoped>
/* 样式只在当前页面有效 */
</style>

3. 组件间通信

在 UniApp 中，组件间通信可以通过 props 和事件来实现。

通过 props 传递数据

<!-- parent-component.vue -->
<template>
  <child-component :message="parentMessage" />
</template>

<script>
import ChildComponent from '@/components/child-component.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
}
</script>

<!-- child-component.vue -->
<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  props: ['message']
}
</script>

通过事件传递数据

<!-- child-component.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Message from Child');
    }
  }
}
</script>

<!-- parent-component.vue -->
<template>
  <child-component @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from '@/components/child-component.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // Output: "Message from Child"
    }
  }
}
</script>

easycom组件

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

easycom组件的使用

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构

例如：

引用：组件使用的入门教程 | uni-app官网 (dcloud.net.cn)

uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue

同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。如下：

<template>
		<view>
			<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
		</view>
	</template>
<script>
	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
	export default {
		data() {
			return {

			}
		}
	}
</script>

uni-ui

uni-ui 是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui 不包括内置组件，它是内置组件的补充

uni-ui使用

uni-ui 介绍 | uni-app官网 (dcloud.net.cn)

DCloud 插件市场

1. 导入 Uni-UI

首先，需要在 UniApp 项目中导入 Uni-UI。你可以从 DCloud 的插件市场中找到 Uni-UI，并将其导入到你的项目中。在 HBuilderX 或其他支持 UniApp 的编辑器中，选择插件市场，搜索并导入 Uni-UI。

找到插件后直接导入并使用

<template>
  <view>
    <!-- 使用 Uni-UI 的按钮组件 -->
    <uni-button type="primary">Primary Button</uni-button>
  </view>
</template>

<script>
// 注意：Uni-UI 的组件一般会自动注册，不需要额外导入
export default {
  // 页面相关配置
}
</script>

<style>
/* 在 style 标签中编写样式 */
</style>