How to apply components in uniAPP components

With the rise of mobile application development, more and more developers have higher requirements for multi-platform compatibility. As a cross-platform framework based on Vue.js, uniAPP provides many useful components to support multi-platform compatibility.

This article will introduce how to apply components in uniAPP components.

1. Understand the uniAPP component

Before we start to explain how to apply the component, we need to first understand the basic concepts of the uniAPP component.

uniAPP components refer to UI elements that include views, styles and logical functions. These components can be easily reused in uniAPP applications and are compatible with various platforms. You can build a uniAPP component by creating a .vue file.

2. uniAPP component applies component

In uniAPP, one component can apply another component using component reference. That is, use the child component within the parent component. Let’s look at the specific steps below.

1. Create a subcomponent

First we need to create a subcomponent. We can create a component by creating a new .vue file in the components folder of the project, as shown below:

<template>
  <view class="child-comp">
    <text>我是一个子组件</text>
  </view>
</template>

<script>
  export default {
    name: 'childComp'
  }
</script>

<style>
  .child-comp {
    background-color: #ddd;
    width: 100px;
    height: 100px;
  }
</style>

This sub-component contains a view tag and a text tag, and sets some basic style.

2. Reference the child component in the parent component

Next, we need to reference the child component in the parent component. In the .vue file of the parent component, we need to introduce the child component first, and then use it as a custom tag in the template section, as shown below:

<template>
  <view>
    <childComp></childComp>
  </view>
</template>

<script>
  import childComp from '@/components/child-comp.vue'

  export default {
    components: {
      childComp
    },
  }
</script>

The childComp imported here refers to the childComp we just imported Created subcomponent. Register it in the components option so that it can be referenced in the template. In the template, we directly use the tag instead of the