Vue全局注冊(cè)中的kebab-case和PascalCase用法
全局注冊(cè)
全局注冊(cè)的組件，可以用在所有的 Vue 實(shí)例 (new Vue) 中。
語法：
# 第一種方式
Vue.component('組件名稱', { /* ... */ })
# 第二種方式
Vue.component('組件名稱', 組件對(duì)象);
定義組件名：
使用 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">
// 全局注冊(cè)組件
// 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ù)對(duì)象
}
});
</script>
</body>
</html>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2 配置 Axios api 接口調(diào)用文件的方法
本篇文章主要介紹了Vue2 配置 Axios api 接口調(diào)用文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue?element-ui?el-cascader?只能末級(jí)多選問題
這篇文章主要介紹了Vue?element-ui?el-cascader?只能末級(jí)多選問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Element-UI表格嵌入popover遇到的問題及解決方案
在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關(guān)于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下2023-11-11
Vuex?可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架，本文主要介紹了VUEX如何使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue使用neovis操作neo4j圖形數(shù)據(jù)庫及優(yōu)缺點(diǎn)
這篇文章主要介紹了vue使用neovis操作neo4j圖形數(shù)據(jù)庫,本文給大家介紹了與常規(guī)做法的優(yōu)缺點(diǎn)對(duì)比及使用技巧，對(duì)vue?neo4j圖形數(shù)據(jù)庫相關(guān)知識(shí)感興趣的朋友一起看看吧2022-02-02
Vue中使用js制作進(jìn)度條式數(shù)據(jù)對(duì)比動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Vue中使用js制作進(jìn)度條式數(shù)據(jù)對(duì)比動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue-cli中post請(qǐng)求發(fā)送Json格式數(shù)據(jù)方式
這篇文章主要介紹了Vue-cli中post請(qǐng)求發(fā)送Json格式數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景
這篇文章主要給大家介紹了關(guān)于element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景,一般在實(shí)際開發(fā)場(chǎng)景中我們需要對(duì)時(shí)間選擇做一些限制,如不能選擇今天之前的時(shí)間、不能選擇今天以后的日期、限制日期不能大于開始日期等等,需要的朋友可以參考下2023-08-08
vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue自定義橫向滾動(dòng)條css導(dǎo)航兩行排列布局實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue.js實(shí)現(xiàn)模擬微信朋友圈開發(fā)demo
本篇文章主要介紹了Vue.js實(shí)現(xiàn)模擬微信朋友圈開發(fā)demo，實(shí)現(xiàn)展示朋友圈，評(píng)論，點(diǎn)贊等功能，有興趣的可以了解一下。2017-04-04