uni-app 自定义组件

在uni-app中，自定义组件是一个强大的功能，允许开发者将重复的UI逻辑和样式封装成一个独立的组件，以便在多个页面中复用。下面是一个简单的示例，展示如何创建和使用自定义组件。

1. 创建自定义组件

首先，在项目的components目录下创建一个新的文件夹，例如MyComponent，然后在该文件夹中创建两个文件：MyComponent.vue和MyComponent.json。

MyComponent.vue

<template>
  <view class="my-component">
    <text>{{ message }}</text>
    <button @click="changeMessage">Change Message</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, this is a custom component!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message has been changed!';
    }
  }
};
</script>

<style scoped>
.my-component {
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

MyComponent.json

{
  "component": true,
  "usingComponents": {}
}

2. 使用自定义组件

接下来，在需要使用该组件的页面中引入它。例如，在pages/index/index.vue中：

<template>
  <view>
    <MyComponent />
  </view>
</template>

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

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

<style>
/* 页面样式 */
</style>

3. 运行项目

确保你的uni-app项目已经正确配置，然后运行项目。你应该能够在页面中看到自定义组件MyComponent，并且点击按钮后，组件中的消息会发生变化。

注意事项

• 组件的样式使用scoped属性，这样可以确保样式只作用于当前组件，避免全局污染。
• 在MyComponent.json中设置"component": true，表示这是一个组件文件。
• 引入组件时，路径要正确，确保文件路径与项目结构相匹配。
• 组件中的数据和方法是封装在组件内部的，外部页面不能直接访问或修改，需要通过组件的props、事件等方式进行通信。

通过以上步骤，你就可以在uni-app中创建和使用自定义组件了。希望这个示例对你有所帮助！