当前位置: 首页 > news >正文

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

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.dtcms.com/a/107900.html

相关文章:

  • 汇编学习之《call, return指令》
  • 【前端安全】模板字符串动态拼接HTML的防XSS完全指南
  • 安装IIS 10
  • QML输入控件: RangeSlider的基础用法与样式
  • Flutter中实现中国省份地图
  • dom操作笔记、xml和document等
  • C语言学习笔记
  • 如何平衡元器件成本与性能
  • Day19 -实例:xcx逆向提取+微信开发者工具动态调试+bp动态抓包对小程序进行资产收集
  • React-Markdown详解
  • 解决大小写、保留字与特殊字符问题!Oracle双引号在SQL中的特殊应用
  • 论文阅读笔记:Denoising Diffusion Implicit Models (4)
  • PyTorch 激活函数
  • PyQt5和OpenCV车牌识别系统
  • Java基础 4.2
  • Mysql 在什么样的情况下会产生死锁?
  • Python爬虫第2节-网页基础和爬虫基本原理
  • 2.Linux的权限理解
  • mysql docker容器启动遇到的问题整理
  • 华为面试,机器学习深度学习知识点:
  • Windows C++ 排查死锁
  • MIT6.S081 - Lab6 Copy-on-Write(写时复制)
  • 模拟集成电路设计与仿真 : Mismatch
  • 数据库 第一章 MYSQL基础(4)
  • 《汽车噪声控制》课程作业
  • 英飞凌高信噪比MEMS麦克风驱动人工智能交互
  • Pandas基础及series对象
  • Token是什么?
  • 时序数据库 InfluxDB(六)
  • Python爬虫第一战(爬取优美图库网页图片)