Home  >  Article  >  Web Front-end  >  How to create uniapp component

How to create uniapp component

coldplay.xixi
coldplay.xixiOriginal
2020-12-08 13:59:054448browse

How to create a uniapp component: first create a new component [.vue] file; then create a component document structure, the code is [21c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83aexport default {name: "Component Name",props : {Attribute name: {type:String].

How to create uniapp component

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free):uni-app development tutorial

Method to create uniapp component:

Create a custom component

1. Create a new component .vueFile

2.Component document structure

<template name="组件名称">
<view>
    ......
</view>
</template>
<script>
export default {
name: "组件名称",
//属性
props: {
属性名称: {
type: String,//属性类型
value: "值"
},
......
},
//组件生命周期
created:function(e){
},
methods: {
函数名称:function(obj){
},
}
}
</script>
<style>
组件样式
</style>

Using components

1、引用组件
import 组件名称 from "../../components/组件名.vue";
2、注册组件
export default{
components:{
组件名称
},
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>

Related free learning recommendations:Programming video

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn