当前位置：首页 / 网站建设 / 正文

uniapp怎么自定义组件供其他页面调用

发布时间：2020-12-22 17:19:58 作者：小超越君 84 次浏览

在使用uniapp开发中，其实很多功能我们可以抽离出来供其他页面调用的，比如底部的菜单栏、分享、登录等。
如果每个页面都写一遍，虽然可以直接复制粘贴，但是对于后续维护来说代价是很大的，比如某个功能需要修改一下，那么所有运用到这个功能代码的页面都需要修改一遍。
显然这样太累了。可能有时粗心大意有些页面还遗漏了。
在这种场景下，我们该怎么做呢？因为uniapp是使用vue语法，同样支持vue组件功能。我们只需要在components目录下创建组件即可。

uniapp

说了那么多，具体怎么实现呢？下面小超越就来给你解答一下。

1、在uniapp根目录下的components目录创建自定义组件名.vue文件。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

},
}

}

</script>

<style>

组件样式

</style>

代码解读：里面最重要的一个就是props，通过定义里面的属性来传递参数，其他的写法都一样。