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

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

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

[cc lang="html"] [/cc] 代码解读:里面最重要的一个就是props,通过定义里面的属性来传递参数,其他的写法都一样。

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

首先要引用组件 [cc lang="html"]import 组件名称 from "../../components/组件名.vue"; //引用组件文件 //注册组件 export default{ components:{ 组件名称 }, } //在视图模板中使用组件 <组件名称 组件属性="对应的值">[/cc] 代码解读:如果名称用-字符隔开,那么在组件的时候,把名称的-后面的第一个字换成大写字母,比如组件名 shop-menu 那么组件名称为shopMenu。 以上就是使用uniapp抽离组件的方法。是不是很简单呢?你学会了吗?

如需转载请保留本文出处: https://www.zhe94.com/849.html

上一篇:快速建站之前言:如何建立一个自己的网站
下一篇:PHP7怎么判断变量是不是空数组