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