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

作者:admin 发布时间:2020-12-22 17:19:58 浏览:1655次
在使用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://zhe94.com/849.html

上一篇:快速建站之前言:如何建立一个自己的网站
下一篇:PHP7怎么判断变量是不是空数组
[uni-app]微信小程序隐私保护指引用户同意窗口代码

[uni-app]微信小程序隐私保护指引用户同意窗口代码

为规范开发者的用户个人信息处理行为,保障用户合法权益,微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使用规则,方可调用微信提供的隐私接口。
vscode右键运行插件—code runner

vscode右键运行插件—code runner

在VS Code里,能有一种快捷的方式来运行各类的代码,甚至是代码片段。就好了,Code Runner插件支持了 Node.js, Python, C++, Java, PHP, Perl, Ruby, Go等超过40种的语言。下面,我们就来看看如何来玩转Code Runner,提高你的效率。
php中的两个冒号是什么意思?例如Request::header('token')

php中的两个冒号是什么意思?例如Request::header('token')

在PHP中,双冒号(::)被称为范围解析操作符(Scope Resolution Operator),也有时被称为静态调用运算符。它用于引用类中的静态属性、静态方法或常量。
php __construct是什么意思

php __construct是什么意思

在PHP中,__construct是一个魔术方法(Magic Method),用于类的构造函数。当使用new关键字实例化一个对象时,会自动调用该方法。
thinkphp6.*版本的无缝升级到thinkphp8.0版本实操方法

thinkphp6.*版本的无缝升级到thinkphp8.0版本实操方法

ThinkPHP是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP诞生十七年来一直秉承简洁实用的设计原则,在保持出色的性能和至简代码的同时,更注重易用性。
php出现SSL certificate problem: unable to get local issuer certificate的解决办法

php出现SSL certificate problem: unable to get local issuer certificate的解决办法

在PHP中使用cURL或其他网络操作时,可能会遇到一个常见的SSL证书问题,错误信息为“SSL certificate problem: unable to get local issuer certificate”。翻译过来的意思是:“SSL证书问题:无法获取本地颁发者证书”,这是因为PHP试图验证SSL证书,但是无法找到用来验证这些证书的CA(证书颁发机构)证书。