【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

四、vue组件

uni-app官网

组件,无论是小程序还是vue,都是非常关键的。

现在单页面程序,主要的依据就是组件。

组件的概念,可以将App.vue当做主组件,下面的vue文件都是若干个小组件。

component,小组件,可以公用。

组件优点:

4.1 easycom自动导入自定义组件

组件的注册

全局注册(需要挂载到vue里,适用于页面头部和底部十分公用的部分)和局部注册(写vue文件时局部注册用的较多)

局部注册

局部注册之前,在需要引用该组件的页面,导入你想使用的组件。

页面引入组件方式

4.1.1 介绍

2 通过uniapp的easycom。

4.1.2 具体实现

步骤1:在项目demo1右键,创建components目录

步骤2:创建组件,如图。 

创建组件成功。

步骤3:自定义组件

步骤4:使用组件

效果

使用自定义组件生效。

4.2 通过子组件Prop为同组件传不同的值

创建一个名为pubTitle的公共组件,到components文件夹下。自定义组件pubTitle。

<template><view class="pubTitle"><view class="big">文章的标题</view><view class="small">副标题</view><view class="line"></view></view>
</template><script>export default {name:"pubTitle",data() {return {};}}
</script><style lang="scss">
.pubTitle {padding: 60rpx 30rpx;text-align: center;.big {font-size: 50rpx;font-weight: 700;color: #333;}.small {font-size: 28rpx;color: #888;}.line {display: inline-block;width: 80rpx;height: 8rpx;background: #1aa034;border-radius: 10rpx;}
}
</style>

在index首页里引入公共组件pubTitle。

注意:这里index使用的公共组件pubTitle也可以转为短横线连接的,即pub-title。

4.2.1 动态标题

uni-app官网

在index首页,list新闻列表页和about关于我们页,都是用了pubTitle公共组件。

标题显示的内容都是一样的,如下图。

现在想动态显示不同页面的标题。

uni-app官网

Prop传值

步骤① 在子组件里接收属性。如图,在pubTitle子组件里接收title属性。

步骤②,在父组件里传入属性值。

效果

副标题同理,

4.2.2 props绑定动态值及数据类型默认值

这里是在template里设置的标题

 要绑定js里的值,那么就要绑定动态值,首先在data里定义text。

然后给子组件传属性值的地方绑定该属性值,

p27  2:48

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

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

相关文章

如何解决态势感知中的“时隐时现”问题

解决态势感知中的“时隐时现”问题有以下几个方法&#xff1a; 1、确保所有关键的监控设备和传感器正常运行&#xff0c;能够及时和准确地检测到各种异常情况。 2、引入先进的技术手段。例如使用人工智能和机器学习算法来识别和分析大量的数据&#xff0c;快速发现异常和威胁&a…

RabbitMQ的基本使用,进行实例案例的消息队列

目录 一、介绍 1. 概述 2. 作用 3. 工作原理 二、RabbitMQ安装部署 1. 安装 2. 部署 3. 增加用户 三、实现案例 1. 项目创建 2. 项目配置 3. 生产者代码 4. 消费者代码 四、测试 每篇一获 一、介绍 1. 概述 RabbitMQ 是一种开源的消息代理和队列服务器&#x…

Spring Web文件上传功能简述

文章目录 正文简单文件上传文件写入 总结 正文 在日常项目开发过程中&#xff0c;文件上传是一个非常常见的功能&#xff0c;当然正规项目都有专门的文件服务器保存上传的文件&#xff0c;实际只需要保存文件路径链接到数据库中即可&#xff0c;但在小型项目中可能没有专门的文…

LeetCode 2894. 分类求和并作差

给你两个正整数 n 和 m 。 现定义两个整数 num1 和 num2 &#xff0c;如下所示&#xff1a; num1&#xff1a;范围 [1, n] 内所有 无法被 m 整除 的整数之和。 num2&#xff1a;范围 [1, n] 内所有 能够被 m 整除 的整数之和。 返回整数 num1 - num2 。 示例 1&#xff1a; …

vector的定义与遍历

一、vector的定义&#xff1a; 1、导入#include 2、vector<数据类型> 变量名 3、赋值方式&#xff1a; 变量名.push_back(); #include<iostream> #include<vector> #include<algorithm> using namespace std; void test02(int val){cout << val…

Oracle命令大全

文章目录 1. SQL*Plus命令&#xff08;用于连接与管理Oracle数据库&#xff09;2. SQL数据定义语言&#xff08;DDL&#xff09;命令3. SQL数据操作语言&#xff08;DML&#xff09;命令4. PL/SQL程序块5. 系统用户管理6. 数据备份与恢复相关命令1. SQL*Plus命令&#xff08;用…

西门子燃烧控制器维修LMV37.410A2WH

西门子燃烧控制器维修范围包括&#xff1a; LMV系列燃烧器控制系统维修 LMV5系列控制器维修 AZL系列显示操作单元维修 QRI系列火焰探测器维修 SQM4系列电动执行机构维修 AZL系列或其他控制系统维修或设置燃烧器的启停&#xff0c;燃料&#xff0c;运行模式&#xff0c;运行…

基于网络爬虫的微博热点分析,包括文本分析和主题分析

基于Python的网络爬虫的微博热点分析是一项技术上具有挑战性的任务。我们使用requests库来获取微博热点数据&#xff0c;并使用pandas对数据进行处理和分析。为了更好地理解微博热点话题&#xff0c;我们采用LDA主题分析方法&#xff0c;结合jieba分词工具将文本分割成有意义的…

配置zabbix平台对数据库以及主从状态的监控

引言&#xff1a;明人不说暗话&#xff0c;今天分享下配置zabbix平台对数据库以及主从状态的监控 准备好zabbix监控平台&#xff08;zabbix-server端&#xff09;例10.12.153.235 db1客户端&#xff08;zabbix-agent&#xff09;例10.12.153.73 1.安装Zabbix存储库 # rpm -Uv…

PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

最近新项目需要处理 PDF&#xff0c;研究了 PDf.js 之后觉得很不错&#xff0c;于是写篇文章推荐给大家。 PDF.js 的功能和它的名字一样简单&#xff0c;是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发…

文件包含漏洞讲解

文件包含即程序通过包含函数调用本地或远程文件,以此来实现拓展功能。 基础编辑 本地文件包含 常见的文件包含漏洞的形式为 <?php include("inc/" . $_GET[file]); ?> 考虑常用的几种包含方式为 同目录包含file.htaccess目录遍历?file…/…/…/…/…/……

RabbitMQ安装和使用

简介 RabbitMQ是一套开源&#xff08;MPL&#xff09;的消息队列服务软件&#xff0c;是由LShift提供的一个Advanced Message Queuing Protocol (AMQP) 的开源实现&#xff0c;由以高性能、健壮以及可伸缩性出名的Erlang写成。所有主要的编程语言均有与代理接口通讯的客户端库…

JavaSE核心基础-循环嵌套-笔记

1.循环嵌套概述 循环嵌套&#xff1a;一个循环体内包含了另一个完整的循环结构&#xff0c;那么总共的循环次数 外循环次数 * 内循环次数。 2.循环嵌套分类 语法&#xff1a; for(初始化表达式①; 循环条件②; 步进表达式⑦) { for(初始化表达式③; 循环条…

SQL Server中数据表的增删查改

文章目录 一、增二、查三、改四、删除 一、增 进行增删查改的前提需要在指定数据库中创建数据表&#xff0c;对这块不大理解的可以先看看前面几期文章&#xff1a; 创建数据库 创建数据表 use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,Stu…

HarmonyOS【应用服务开发】在模块中添加Ability

Ability是应用/服务所具备的能力的抽象&#xff0c;一个Module可以包含一个或多个Ability。应用/服务先后提供了两种应用模型&#xff1a; FA&#xff08;Feature Ability&#xff09;模型&#xff1a; API 7开始支持的模型&#xff0c;已经不再主推。Stage模型&#xff1a;AP…

Vue动态添加新的属性到实例上(vue的问题)

当我们去看vue文档的时候&#xff0c;发现如果在实例创建之后添加新的属性到实例上&#xff0c;它不会触发视图更新。比如我们我们开始创建了一个对象实例&#xff0c;在实例创建之后为其增加新的属性&#xff0c;我们发现这个属性不能生效,此时需要使用this.$set()方法。 &…

C# new Thread和Task.Run,多线程(Thread和Task)

一、开启多线程-new Thread的使用 示例一 Thread thread25yi new Thread(new ThreadStart(obj.MethodTimer1)); thread25yi.Start(); void MethodTimer1() { while (true) { Console.WriteLine(DateTime.Now.ToString() "_" thread25yi.CurrentThread.Managed…

杂记 | 在Linux上使用Docker-compose安装单机版Milvus向量数据库并配置访问控制和可视化面板(Attu)

文章目录 01 Milvus向量数据库简介02 安装前的准备03 安装3.1 创建milvus工作目录3.2 下载并编辑docker-compose.yml3.3 下载milvus.yml文件3.4 启动milvus 04 访问可视化面板并修改密码 01 Milvus向量数据库简介 Milvus是一款开源的向量数据库&#xff0c;它专为AI应用设计&a…

Docker(三)使用 Docker 镜像:从仓库获取镜像;管理本地主机上的镜像;介绍镜像实现的基本原理

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 使用 Docker 镜像 在之前的介绍中&#xff0c;我们知道镜像是 Docker 的三大组件之一。 Docker 运行容器前需要本地存在对应的镜像&#x…

【图论】树的直径

树的直径即为一棵树中距离最远的两点之间的路径 方法一&#xff1a;DFS 先以任意一点为起点跑一遍dfs&#xff0c;记录离起点距离最远的点p&#xff08;这个点一定是直径的一个端点&#xff0c;感性理解一下不证明了&#xff09;&#xff0c;然后再以最远点再跑一遍dfs&#…