Vue 组件命名及子组件接收参数命名

news2025/4/17 16:27:50

1. 对于单个单词的组件

方式一:首字母大写。如 <School></School>。在 vue 开发者工具中默认使用的是该种方式。

方式二: 首字母小写。如 <school></school>

2. 对于多个单词的组件

方式一:每个单词都是小写,单词之间用短横线连接。如 my-school, 在注册组件时,需要将 my-school 用引号包裹起来。在 vue 开发者工具中会自动转换成大驼峰,即 <MySchool />

方式二:使用大驼峰,每个单词之间大写。如 <MySchool> 。值得一提的是,这种方式需要运用在脚手架中,否则会报错。

注意:

1. 这种 <MySchool /> 自闭合标签需要在脚手架中使用,否则后续会导致组件不能渲染。

2. 使用 name 配置项可以指定组件在开发者工具中呈现的名字。

3. 组件要避免使用 HTML 标签,大小写都不行,否则会报错。如 H2 SPAN

3. 子组件接收参数命名 

子组件接收父组件的参数需要使用 props 接收。有以下两种方式声明接收

方式一:小驼峰。如 mySchool 

方式二:每个单词小写,使用短横线连接。如 my-school

//父组件调用
<PageTools my-name="张三"></PageTools>

//子组件内接收
//写法1
 props: {
    myName: {
      type: String,
      default: ''
    }
  }
//写法2
props: {
    'my-name': {
      type: String,
      default: ''
    }
  }  

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

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

相关文章

PandaAI:一个基于AI的对话式数据分析工具

PandaAI 是一个基于 Python 开发的自然语言处理和数据分析工具&#xff0c;支持问答式&#xff08;ChatGPT&#xff09;的数据分析和报告生成功能。PandaAI 提供了一个开源的框架&#xff0c;主要核心组件包含用于数据处理的数据准备层&#xff08;Pandas&#xff09;以及实现 …

【C++算法】50.分治_归并_翻转对

文章目录 题目链接&#xff1a;题目描述&#xff1a;解法C 算法代码&#xff1a;图解 题目链接&#xff1a; 493. 翻转对 题目描述&#xff1a; 解法 分治 策略一&#xff1a;计算当前元素cur1后面&#xff0c;有多少元素的两倍比我cur1小&#xff08;降序&#xff09; 利用单…

基于pycatia的CATIA层级式BOM生成器开发全解析

引言:BOM生成技术的革新之路 在高端装备制造领域,CATIA的BOM管理直接影响着研发效率和成本控制。传统VBA方案 虽能实现基础功能,但存在代码维护困难、跨版本兼容性差等痛点。本文基于pycatia框架,提出一种支持动态层级识别、智能查重、Excel联动的BOM生成方案,其核心突破…

Flink 1.20 Kafka Connector:新旧 API 深度解析与迁移指南

Flink Kafka Connector 新旧 API 深度解析与迁移指南 一、Flink Kafka Connector 演进背景 Apache Flink 作为实时计算领域的标杆框架&#xff0c;其 Kafka 连接器的迭代始终围绕性能优化、语义增强和API 统一展开。Flink 1.20 版本将彻底弃用基于 FlinkKafkaConsumer/FlinkK…

2025年渗透测试面试题总结- 某四字大厂面试复盘扩展 一面(题目+回答)

网络安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 某四字大厂面试复盘扩展 一面 一、Java内存马原理与查杀 二、冰蝎与哥斯拉原理对比&#xff08;技术演…

批量压缩 jpg/png 等格式照片|批量调整图片的宽高尺寸

图片格式种类非常的多&#xff0c;并且不同的图片由于像素、尺寸不一样&#xff0c;可能占用的空间也会不一样。文件太大会占用较多的磁盘空间&#xff0c;传输及上传系统都非常不方便&#xff0c;可能会收到限制&#xff0c;因此我们经常会碰到需要对图片进行压缩的需求。如何…

【动手学深度学习】卷积神经网络(CNN)入门

【动手学深度学习】卷积神经网络&#xff08;CNN&#xff09;入门 1&#xff0c;卷积神经网络简介2&#xff0c;卷积层2.1&#xff0c;互相关运算原理2.2&#xff0c;互相关运算实现2.3&#xff0c;实现卷积层 3&#xff0c;卷积层的简单应用&#xff1a;边缘检测3.1&#xff0…

在huggingface上制作小demo

在huggingface上制作小demo 今天好兄弟让我帮他搞一个模型&#xff0c;他有小样本的化学数据&#xff0c;想让我根据这些数据训练一个小模型&#xff0c;他想用这个模型预测一些值 最终我简单训练了一个小模型&#xff0c;起初想把这个模型和GUI界面打包成exe发给他&#xff0…

51.评论日记

千万不能再挖了&#xff0c;否则整个华夏文明将被改写。_哔哩哔哩_bilibili 2025年4月7日22:13:42

SpringCloud第二篇:注册中心Eureka

注册中心的意义 注册中心 管理各种服务功能包括服务的注册、发现、熔断、负载、降级等&#xff0c;比如dubbo admin后台的各种功能。 有了注册中心&#xff0c;调用关系的变化&#xff0c;画几个简图来看一下。(了解源码可求求: 1791743380) 服务A调用服务B 有了注册中心之后&a…

ES 参数调优

1、refresh_interval 控制索引刷新的时间间隔。增大这个值可以减少I/O操作&#xff0c;从而提升写入性能&#xff0c;但会延迟新文档的可见性 查看 GET /content_erp_nlp_help_202503191453/_settings?include_defaultstrue 动态修改&#xff1a;refresh_interval 是一个动态…

用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)

一、功能概览和本文核心 本次开发&#xff0c;不是1天干撸&#xff0c;而是在下班后或早起搞的&#xff0c;总体加和计算了一下&#xff0c;大概1天的时间&#xff08;12个小时&#xff09;&#xff0c;平常下班都是9点的衰仔&#xff0c;好在还有双休&#xff0c;谢天谢地。 …

【GeoDa使用】空间自相关分析操作

使用 GeoDa 软件进行空间自相关分析 双击打开 GeoDa 软件 选择 .shp 文件 导入文件 空间权重矩阵&#xff08;*.gal / *.gwt&#xff09;是进行任何空间分析的前提 构建空间权重矩阵 空间权重矩阵&#xff08;Spatial Weights Matrix&#xff09; 是一个用来描述空间对象之间…

C++基于rapidjson的Json与结构体互相转换

简介 使用rapidjson库进行封装&#xff0c;实现了使用C对结构体数据和json字符串进行互相转换的功能。最短只需要使用两行代码即可无痛完成结构体数据转换为Json字符串。 支持std::string、数组、POD数据&#xff08;int,float,double等&#xff09;、std::vector、嵌套结构体…

OpenStack Yoga版安装笔记(十七)安全组笔记

一、安全组与iptables的关系 OpenStack的安全组&#xff08;Security Group&#xff09;默认是通过Linux的iptables实现的。以下是其主要实现原理和机制&#xff1a; 安全组与iptables的关系 OpenStack的安全组规则通过iptables的规则链实现。每条安全组规则会被转换为相应的i…

通义万相2.1 图生视频:为AI绘梦插上翅膀,开启ALGC算力领域新纪元

通义万相2.1图生视频大模型 通义万相2.1图生视频技术架构万相2.1的功能特点性能优势与其他工具的集成方案 蓝耘平台部署万相2.1核心目标典型应用场景未来发展方向 通义万相2.1ALGC实战应用操作说明功能测试 为什么选择蓝耘智算蓝耘智算平台的优势如何通过API调用万相2.1 写在最…

52.个人健康管理系统小程序(基于springbootvue)

目录 1.系统的受众说明 2.开发环境与技术 2.1 MYSQL数据库 2.2 Java语言 2.3 微信小程序技术 2.4 SpringBoot框架 2.5 B/S架构 2.6 Tomcat 介绍 2.7 HTML简介 2.8 MyEclipse开发工具 3.系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作…

学习比较JVM篇(六):解读GC日志

一、前言 在之前的文章中&#xff0c;我们对JVM的结构、垃圾回收算法、垃圾回收器做了一些列的讲解&#xff0c;同时也使用了JVM自带的命令行工具进行了实际操作。今天我们继续讲解JVM。 我们学习JVM的目的是为了了解JVM&#xff0c;然后优化对应的参数。那么如何了解JVM运行…

I²S协议概述与信号线说明

IIS协议概述 ​ IS&#xff08;Inter-IC Sound&#xff09;协议&#xff0c;又称 IIS&#xff08;Inter-IC Sound&#xff09;&#xff0c;是一种专门用于数字音频数据传输的串行总线标准&#xff0c;由飞利浦&#xff08;Philips&#xff09;公司提出。该协议通常用于微控制器…

免费Deepseek-v3接口实现Browser-Use Web UI:浏览器自动化本地模拟抓取数据实录

源码 https://github.com/browser-use/web-ui 我们按照官方教程&#xff0c;修订几个环节&#xff0c;更快地部署 步骤 1&#xff1a;克隆存储库 git clone https://github.com/browser-use/web-ui.git cd web-ui Step 2: Set Up Python Environment 第 2 步&#xff1a;设置…