How to set attribute type in uniapp component

In uniapp development, components are the basic modules for building applications. They can be reused and organized into hierarchical structures. When creating a component, we often need to define the properties of the component to achieve customization. These properties may be of different types such as string, number, boolean, etc. This article will introduce how to set the attribute type in the uniapp component.

1. prop attribute

In uniapp, component properties are defined through prop. In the component's vue file, you can specify the component's property list through the props attribute. For example:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    props: {
      message: String
    }
  }
</script>

In this example, we define a component named MyComponent and have a string type property named message. When the component is used, it can be used like this:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

In this example, we set the message to "Hello world!". When MyComponent is rendered, "Hello world!" is actually displayed.

2. Attribute Type

In uniapp, the type of an attribute can be any valid JavaScript type. Here are some examples of attribute types:

// 字符串类型
message: String

// 数字类型
count: Number

// 布尔类型
visible: Boolean

// 对象类型
userInfo: Object

// 数组类型
list: Array

// 函数类型
action: Function

It should be noted that when the component is used, the attribute value will be automatically converted to the specified type. If we set message to a number in the above example, then it will be automatically converted to a string.

3. Default property values

In components, we usually want to have some default property values. In uniapp, we can set the default value by setting the default attribute of props. For example:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    props: {
      message: {
        type: String,
        default: &#39;Hello world!&#39;
      }
    }
  }
</script>

In this example, we added a default attribute, which specifies that the default value of message is "Hello world!". If we do not provide the message attribute when using the component, then it will display the default value "Hello world!".

4. Limit attribute values

In some cases, we want the attribute to only accept specific values. In uniapp we can achieve this by specifying enum. For example:

<template>
  <div>{{ color }}</div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    props: {
      color: {
        type: String,
        enum: [&#39;red&#39;, &#39;green&#39;, &#39;blue&#39;]
      }
    }
  }
</script>

In this example, we hope that the color attribute can only accept one of the three values ​​​​of "red", "green", and "blue". If the color property we provide when using the component is not in the enumeration list, uniapp will throw a warning.

5. Custom verification function

We can also verify the value of the attribute by defining a function. For example:

<template>
  <div>{{ score }}</div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    props: {
      score: {
        type: Number,
        validator: function (value) {
          return value >= 0 && value <= 100
        }
      }
    }
  }
</script>

In this example, we add a validator function to verify the value of the score attribute. If the score attribute does not meet the conditions, uniapp will throw a warning.

Summary

In uniapp, component properties are very important because they allow us to customize the component and make it fit our needs. In this article, we covered how to set property types, default property values, qualified property values, and custom validation functions in components. I hope this article can help you better use uniapp development components!

The above is the detailed content of How to set attribute type in uniapp component. For more information, please follow other related articles on the PHP Chinese website!