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

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

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

在使用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,通过定义里面的属性来传递参数,其他的写法都一样。

2、在其他页面调用该组件

首先要引用组件

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

代码解读:如果名称用-字符隔开,那么在组件的时候,把名称的-后面的第一个字换成大写字母,比如组件名 shop-menu 那么组件名称为shopMenu。

以上就是使用uniapp抽离组件的方法。是不是很简单呢?你学会了吗?

转载请保留本文链接:https://www.zhe94.com/849.html

小超越
热爱折腾,曾想着改变世界,如今只能向生活低头,寻找可口的牛奶和面包
添加站长微信作者头像
专注高品质湛江网站建设及湛江SEO优化服务 立即咨询