uni-app组件

一. 什么是组件,有什么好处?

在uni-app中,组件是构成应用的基本单位,它们是用来定义用户界面的一部分,并且通常包含了视图和逻辑。组件的设计使得开发者能够以声明式的方式构建应用界面,并且通过组件化的开发方式来提高代码的复用性、可维护性和可读性。以下是uni-app中组件的一些重要作用:

  1. 封装性:组件将界面的结构、样式和逻辑封装在一起,使得每个组件都是独立的,易于理解和管理。

  2. 复用性:组件可以在不同的地方重复使用,减少代码的冗余,提高开发效率。

  3. 可组合性:简单的组件可以组合成更复杂的组件,这样就可以构建出复杂多变的应用界面。

  4. 数据驱动:组件的状态可以通过数据来驱动,当组件的数据发生变化时,组件会自动更新其视图。

  5. 事件处理:组件可以响应用户的交互事件,如点击、触摸等,并执行相应的操作或触发父组件中的事件处理函数。

  6. 生命周期:组件拥有自己的生命周期,在不同的阶段可以执行特定的操作,比如初始化、渲染前后的处理等。

  7. 样式隔离:组件内部的样式可以被隔离,防止样式冲突,保证组件的独立性。


二. 自定义组件

自定义组件其实就是一个单独的vue文件,原理和jsp中的include作用类.

组件如何创建?

1.首先在项目中创建一个文件夹 components 用于存放组件

2.右击会出现 创建组件

3.使用组件(两种)


<template><!-- 使用组件 -->
<bdqnHeaderVue/>
</template><script setup>// 采用注册的方式,适用于vscodeimport {bdqnHeaderVue} from '../../components/bdqn-header/bdqn-header.vue';
</script><style scoped lang="scss"></style>

<template><!-- 直接使用组件 --><bdqn-header></bdqn-header></template><script setup></script><style scoped lang="scss"></style>

三. 使用 Props 动态的给组件内容赋值


简单使用

首先需要在JavaScript中引入 defineProps() 表示可以接收值

<script setup>defineProps(['name', 'img'])
</script>

直接定义的值只能在页面中使用

<template><view class="header"><image :src="img"></image><view class="tet">{{name}}</view></view>
</template>

如何处理传过来的值?

传过来的数据,只是一个只读类型,可以使用,但是无法更改

<script setup>const data = defineProps(['name', 'img'])console.log(data.name);console.log(data.img);console.log('-------------');
</script>

想要对传输过来的值进行修改,只需要进行接收赋值即可,这里采用计算属性computed

<script setup>import {computed} from 'vue';const data = defineProps(['name', 'img'])var myname = computed(() => {return data.name + '@@@';})
</script>

如果调用者未传值应该怎么办?

可以定义一个默认值和指定传入的类型.

使用对象来接收,分别为属性进行设置

defineProps({name:{type:String, //指定类型default:"匿名"  //默认值},img:{type:String}})

如何传递对象?

直接接收即可

<script setup>defineProps(["obj"])
</script>

设置默认值

<script setup>defineProps({obj:{type:Object,default(){return {name:'匿名',img:'../../static/3.png'}}}})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/411744.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Centos7 java安装

卸载自带 jdk 查询所有的 java( 使用最小配置命令行则查询不出 java 直接进行安装即可 ) 卸载以下4个java软件 删除之后在使用命令进行查询 rpm -qa | grep java 解压jdk&#xff1a; 找到下载位置 使用Ctrlf搜索 配置环境变量&#xff1a; 打开/ etc/profile 在末尾添加以下…

旅游行业怎么利用C#接口发送短信

旅游企业一般拥有众多的分支机构&#xff0c;同时各地分支机构又有众多下属分散在当地各区的旅游营业报名点&#xff0c;以前传统的解决方案是采用专线、MODEM拔号等方式&#xff0c;专线的成本很高&#xff0c;MODEM拔号更费时&#xff0c;且长途拔号互联成本在多点情况下费用…

【一起学Rust | 框架篇 | Tauri2.0框架】rust和前端的相互调用(前端调用rust)

文章目录 前言1. 前端调用rust&#xff08;command&#xff09;1. 在后端定义一个command2. 注册command3. 前端调用command 2. 前端调用rust&#xff08;event&#xff09;4. command完整实例 前言 本期将继续接着上一期&#xff0c;继续探索tauri中rust和前端的相互调用&…

【ceph学习】ceph如何进行数据的读写(1)

版本 ceph版本为17. ceph如何进行读写接口的实现 Ceph的客户端通过librados的接口进行集群的访问&#xff0c;这里的访问包括&#xff1a; 1&#xff09;对集群的整体访问 2&#xff09;对象的访问 两类接口&#xff0c;这套接口&#xff08;API&#xff09;包括C、C和Pytho…

XXE-labs靶场通关攻略

环境地址自行查找 1.寻找靶机地址 使用工具goby进行扫描 因为我的靶场是搭在ubuntu上 直接查找系统是Ubuntu的就可以找到 靶机IP 172.16.1.183 2.访问靶场 3.使用目录扫描工具进行扫描 使用kali自带的dirsearch进行扫描 可以看到一个robots.txt文件 4.访问robots.txt文件 …

发顶会首选:具身智能!新成果直接霸榜CVPR

最近无论是斯坦福机器人炒虾&#xff0c;还是特斯拉官宣机器人进厂&#xff0c;都赚足了眼球&#xff0c;实力证明了具身智能的火爆。 先不说具身智能是实现AGI的关键环节&#xff0c;也是未来研究的重要方向&#xff0c;我们就从发论文的角度来看&#xff0c;今年的各大顶会&…

【已解决】JS Uncaught DOMException: Failed to construct ‘Worker’ 所有场景

【已解决】JS Uncaught DOMException: Failed to construct ‘Worker’ 所有场景 概述 在JavaScript中&#xff0c;Web Workers允许我们运行后台脚本&#xff0c;这些脚本不会影响到页面的性能。然而&#xff0c;当我们尝试创建一个新的Worker时&#xff0c;有时会遇到“Uncau…

【C++】初识C++模板与STL

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理 本章将简单分享C模板与STL相关知识&#xff0c;与之相关更多知识将留到下次更详细地来分享给大家 &#x1f3…

【微信小程序】全局数据共享 - MobX

1. 什么是全局数据共享 2. 小程序中的全局数据共享方案 3.Mobx的使用 1.npm init -y(根据实际情况选择) 在小程序项目中&#xff0c;可以通过 npm 的方式引入 MobX 。 如果你还没有在小程序中使用过 npm &#xff0c;那先在小程序目录中执行命令&#xff1a; npm init -y2. …

坐牢第三十一天(c++)

一.作业&#xff1a; 使用C手动封装一个顺序表&#xff0c;包含成员数组一个&#xff0c;成员变量N个 #include <iostream> #include <cstring> // 引入cstring以使用memcpy using namespace std; // 类型重命名 using datatype int; // typedef int datatype; s…

Pytorch封装简单RNN模型,进行中文训练及文本预测

简述 使用pytorch封装简单RNN模型&#xff0c;使用单层nn.RNN、nn.Linear等实现&#xff0c;然后做简单的文本预测。 数据集 代码参考李沐&#xff1a;https://zh-v2.d2l.ai/chapter_recurrent-neural-networks/rnn-concise.html&#xff0c;但他使用的是一篇英文小说&#…

通配符证书的简介和申请方法

通配符证书是一种SSL证书&#xff0c;它利用域名字段中的通配符&#xff08;*&#xff09;来指示&#xff0c;允许用户在一个证书中关联多个顶级域名及其子域&#xff0c;从而简化证书管理流程&#xff0c;节省成本和时间。以下是通配符证书的简介和申请方法的详细说明&#xf…

Springsecurity中的Eureka报错:Cannot execute request on any known server

完整报错信息&#xff1a; com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server 报错体现&#xff1a; 访问eureka控制面板&#xff1a; 访问测试地址&#xff1a; 控制台报错&#xff1a; 可能的报错原因&#xff…

ZW3D二次开发_UI_ZsCc::OptionRadios控件回调

1.ZW3D中的OptionRadios控件如何实现点击触发回调并且获取点击后的值&#xff1f;如下图 2.教程如下&#xff1a; 1&#xff09;添加OptionRadios控件到表单中 2&#xff09;增加radio按钮 3&#xff09;添加回调 4&#xff09;编写回调函数 int radioCallbackDemo(char* for…

【信息安全】基于CBC的3DES加解密-实验报告

实验运行效果截图 3DES进行加密 3DES进行解密 然后可以选择你想要的操作,继续加密解密或者退出。 基于CBC模式的3DES加解密 一、实验内容 基于3DES加解密算法,编程实现对任意文件实现加解密的软件。 编程实现DES加密和解密算法,并使用DES加解密算法实现3DES加解密算法。选…

Android活动(activity)与服务(service)进行通信

文章目录 Android活动&#xff08;activity&#xff09;与服务&#xff08;service&#xff09;进行通信活动与服务进行通信服务的生命周期 Android活动&#xff08;activity&#xff09;与服务&#xff08;service&#xff09;进行通信 活动与服务进行通信 上一小节中我们学…

基于FPGA的SD卡的数据读写实现(SD NAND FLASH)

文章目录 目录 1、存储芯片分类 2、NOR Flash 与 NAND Flash的区别 3、什么是SD卡&#xff1f; 4、什么是SD NAND&#xff1f; 5、SD NAND的控制时序 6、FPGA实现SD NAND读写 1、存储芯片分类 目前市面上的存储芯片&#xff0c;大致可以将其分为3大类&#xff1a; ① …

【回眸】QAC软件指南——错误分析篇(完整版)

前言 近期需要再次测一下代码&#xff0c;相比以前测试更有经验&#xff0c;也做了比较多的记录&#xff0c;正好将经验通过博客保留下来&#xff0c;为以后可能的QAC测试做准备。 安装导入分析代码 这部分在上一篇中已经详细介绍&#xff0c;具体请见&#xff0c;如有疑问可…

百元蓝牙耳机什么牌子的好?四大宝藏机型真实推荐,快速收藏!

作为一位蓝牙耳机爱好者&#xff0c;无论是上班、娱乐、学习我都离不开蓝牙耳机。通勤时候能听听音乐&#xff0c;是最好的享受&#xff0c;可以让我更加放松&#xff0c;尽情享受音乐带来的乐趣。但市面上的大多数蓝牙耳机都是货不对板的&#xff0c;不是音质一般、就是续航时…

谷歌发布 3 款 Gemini 新模型;字节开源 FLUX Dev Hyper SD Lora,8 步生图丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…