uniapp component的使用方法

在uniapp中如何使用自定义组件？我在项目中创建了一个组件，但引入后无法正常显示，也没有报错信息。请问正确的组件注册和使用步骤是怎样的？是否需要特殊的配置？另外，组件之间的通信方式有哪些推荐的做法？

2 回复

在uniapp中使用组件很简单：1. 在pages.json中注册组件；2. 在template中直接使用。例如全局注册后，在页面直接写<my-component />即可。注意组件路径和命名规范。


在 UniApp 中，组件是可复用的 UI 元素，用于构建页面结构。以下是组件的基本使用方法，包括创建、注册和使用：

1. 创建组件

在项目根目录创建 components 文件夹（如不存在），然后新建一个组件文件（例如 my-component.vue），结构如下：

<template>
  <view class="my-component">
    <text>{{ title }}</text>
    <button @click="onClick">点击</button>
  </view>
</template>

<script>
export default {
  name: "MyComponent",
  props: {
    title: {
      type: String,
      default: "默认标题"
    }
  },
  methods: {
    onClick() {
      this.$emit("customEvent", "数据传递示例");
    }
  }
};
</script>

<style scoped>
.my-component {
  padding: 10px;
  background-color: #f0f0f0;
}
</style>

2. 全局注册组件（可选）

在 main.js 中全局注册，所有页面可直接使用：

import MyComponent from '@/components/my-component.vue';
Vue.component('MyComponent', MyComponent);

3. 局部注册组件

在特定页面的 <script> 中引入并注册：

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

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

4. 使用组件

在页面模板中直接使用组件：

<template>
  <view>
    <MyComponent title="自定义标题" @customEvent="handleEvent" />
  </view>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log("接收数据:", data); // 输出：接收数据: 数据传递示例
    }
  }
};
</script>

关键点说明：

  • Props：父组件通过 props 向子组件传递数据（如 title）。
  • 事件：子组件通过 $emit 触发父组件监听的事件（如 customEvent）。
  • 作用域样式：使用 <style scoped> 确保样式仅作用于当前组件。

注意事项：

  • 组件名避免使用原生 HTML 标签（如 div）。
  • 全局注册适合常用组件，局部注册优化性能。

通过以上步骤，可快速在 UniApp 中创建和使用组件，提升代码复用性和可维护性。

回到顶部