Vue全局注册中的kebab-case和PascalCase用法
更新时间：2023年03月29日 09:30:32 作者：宏辉
这篇文章主要介绍了Vue全局注册中的kebab-case和PascalCase用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
全局注册
全局注册的组件，可以用在所有的 Vue 实例 (new Vue) 中。
语法：
# 第一种方式
Vue.component('组件名称', { /* ... */ })
# 第二种方式
Vue.component('组件名称', 组件对象);
定义组件名：
使用 kebab-case（短横线命名）
Vue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase（帕斯卡命名）
Vue.component('MyComponentName', { /* ... */ })注意
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
命名组件的时候可以是kebab-case，引用时候必须是kebab-case
命名组件的时候可以是PascalCase，引用时候必须是kebab-case
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs父子通信</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<my-div color="red" title="我是一个div"></my-div>
<!-- 等价于
<div style="color: red">我是一个div</div>
-->
</div>
<script type="text/javascript">
// 全局注册组件
// Vue.component('my-div', {
Vue.component('MyDiv', {
template: `<div :style="'color:'+ color" >{{title}}</div>`,
props: {
color: {type: String, required: true, default: ""},
title: {type: String, required: true}
}
});
// 创建Vue实例
var vue = new Vue({
el: '#app', // 渲染的html元素
data: { // 数据对象
}
});
</script>
</body>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Ant Design Vue table中列超长显示...并加提示语的实例
这篇文章主要介绍了Ant Design Vue table中列超长显示...并加提示语的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了Vue-CLI3.x 设置反向代理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在Vue2中,由于数据响应式是利用object.definedProperty()实现的,无法深层监听数据变化,因此提供了$set方法来解决数据变化视图未实时更新的问题,然而,在Vue3中,数据响应式使用ES6的proxy进行数据代理,因此废弃了$set的概念2024-10-10
本篇文章主要介绍了vue组件jsx语法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue3中使用i18n,this.$t报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了从0到1搭建element后台框架优化篇(打包优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
函数式组件就是函数是组件,组件是函数,它的特征是没有内部状态、没有生命周期钩子函数、没有this（不需要实例化的组件）,这篇文章主要给大家介绍了关于Vue.js函数式组件的相关资料,需要的朋友可以参考下2021-10-10
vue-router是vue.js官方给出的路由解决方案，能够轻松的管理SPA项目中组件的切换，这篇文章主要介绍了Vue3 中路由Vue Router 的使用,需要的朋友可以参考下2023-02-02
本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下2024-07-07
最新评论