vue2中组件注册后,调用时如何命名?组件传参时参数名称如何命名?

1. vue2中组件后,调用时如何命名?

场景:

javascript 复制代码
//组件注册
Vue.component('TableList', '../../../TableList.vue');

//父组件调用
//写法1 - 驼峰命名(camelCase)
<TableList/>

//写法2 - 短横线分隔(kebab-case)
<table-list/>

总结:

在 Vue 中,当你使用驼峰命名法(camelCase)注册组件时,既可以使用驼峰,也可以在模板中使用短横线分隔的名称(kebab-case)来调用组件。这是 Vue 的一个特性,它会将短横线分隔的属性名自动转换为驼峰命名法。这样做是为了兼容 HTML 和 JavaScript 的命名习惯。

注意:当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,不能使用驼峰!

2. vue2中子组件接收参数时如何声明?

场景:

javascript 复制代码
//父组件调用
<table-listplaceholder="姓名" api-key="name" />

//子组件内接收
//写法1
 props: {
    apiKey: {
      type: String,
      default: ''
    }
  }
//写法2
props: {
    'api-key': {
      type: String,
      default: ''
    }
  }  

总结:

模板中:使用 - 分隔的属性名(如 api-key)。组件内部:使用驼峰命名法访问属性(如 apiKey)。这样做是为了兼容 HTML 和 JavaScript 的命名习惯。

驼峰命名法:使用 apiKey 更符合 JavaScript 的常见命名习惯,也更容易阅读。

-命名法:使用 'api-key' 可以直接与模板中的属性名对应,但在组件内部使用时需要加引号。

相关推荐
网络研究院5 分钟前
新工具可绕过 Google Chrome 的新 Cookie 加密系统
前端·chrome·系统·漏洞·加密·绕过
x原力觉醒1 小时前
uniapp跨域问题,在开发环境中配置
javascript·vue.js·uni-app
理想不理想v1 小时前
【问答】浏览器如何编译前端代码?
前端·javascript·css·html
风清云淡_A1 小时前
react18中redux-saga实战系统登录功能及阻塞与非阻塞的性能优化
前端·react.js
偷光1 小时前
React 中使用 Echarts
前端·react.js·echarts
Luckyfif1 小时前
Webpack 是什么? 解决了什么问题? 核心流程是什么?
前端·webpack·node.js
王哲晓1 小时前
第十五章 Vue工程化开发及Vue CLI脚手架
前端·javascript·vue.js
揽月凡尘1 小时前
typescript webpack 库打包发布
javascript·webpack·typescript
放逐者-保持本心,方可放逐1 小时前
react 框架应用+总结+参考
前端·前端框架·react
练习两年半的工程师1 小时前
建立一个简单的todo应用程序(前端React;后端FastAPI;数据库MongoDB)
前端·数据库·react.js·fastapi