溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue全局注冊中的kebab-case和PascalCase怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“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 >我是一個div</div>
-->
</div>
<script type="text/javascript">
// 全局注冊組件
// Vue.component('my-div', {
Vue.component('MyDiv', {
template: `<div : >{{title}}</div>`,
props: {
color: {type: String, required: true, default: ""},
title: {type: String, required: true}
}
});
// 創(chuàng)建Vue實例
var vue = new Vue({
el: '#app', // 渲染的html元素
data: { // 數(shù)據(jù)對象
}
});
</script>
</body>
</html>關(guān)于“Vue全局注冊中的kebab-case和PascalCase怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼