Vue全局注冊中的kebab-case和PascalCase用法
更新時(shí)間：2023年03月29日 09:30:32 作者：宏輝
這篇文章主要介紹了Vue全局注冊中的kebab-case和PascalCase用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
全局注冊
全局注冊的組件，可以用在所有的 Vue 實(shí)例 (new Vue) 中。
語法：
# 第一種方式
Vue.component('組件名稱', { /* ... */ })
# 第二種方式
Vue.component('組件名稱', 組件對象);
定義組件名：
使用 kebab-case（短橫線命名）
Vue.component('my-component-name', { /* ... */ })當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如 <my-component-name>。
使用 PascalCase（帕斯卡命名）
Vue.component('MyComponentName', { /* ... */ })注意
當(dāng)使用 PascalCase (首字母大寫命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。
也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時(shí)只有 kebab-case 是有效的。
命名組件的時(shí)候可以是kebab-case，引用時(shí)候必須是kebab-case
命名組件的時(shí)候可以是PascalCase，引用時(shí)候必須是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="我是一個(gè)div"></my-div>
<!-- 等價(jià)于
<div style="color: red">我是一個(gè)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}
}
});
// 創(chuàng)建Vue實(shí)例
var vue = new Vue({
el: '#app', // 渲染的html元素
data: { // 數(shù)據(jù)對象
}
});
</script>
</body>
</html>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
這篇文章主要介紹了vue組件是如何解析及渲染的？，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實(shí)現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動(dòng)態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07
本文是小編精心給大家收藏整理的關(guān)于Vue2.2.0+新特性,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue計(jì)算屬性與監(jiān)視屬性詳細(xì)分析使用
computed是vue的配置選項(xiàng),它的值是一個(gè)對象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于vue3使用canvas的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
defineProperty和Proxy基礎(chǔ)功能及性能對比
這篇文章主要為大家介紹了defineProperty和Proxy基礎(chǔ)功能及性能對比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)
這篇文章主要介紹了vue項(xiàng)目頁面的打印和下載PDF加loading效果的實(shí)現(xiàn)(加水印)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue項(xiàng)目中實(shí)現(xiàn)的微信分享功能示例
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)的微信分享功能,結(jié)合實(shí)例形式分析了基于vue.js實(shí)現(xiàn)的微信分享功能具體定義與使用方法,需要的朋友可以參考下2019-01-01
本篇文章主要介紹了vue-router 學(xué)習(xí)快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03