VUE3學(xué)習(xí)教程之全局組件和局部組件
1. 概述
老話說的好：忍耐是一種策略，同時也是一種性格磨煉。
言歸正傳，今天我們來聊聊 VUE 的全局組件與局部組件。
2. 全局組件
2.1 不使用組件的寫法
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({
template:`
<div>
<div>hello</div>
<div>zhuifengren</div>
</div>
`
});
const vm = app.mount("#myDiv");這是我們之前不使用組件的寫法，接下來我們用組件去實現(xiàn)相同的效果。
2.2 使用組件
const app = Vue.createApp({
template:`
<div>
<hello-com />
<zhuifengren-com />
</div>
`
});
app.component('hello-com', {
template: `
<div>hello</div>
`
});
app.component('zhuifengren-com', {
template: `
<div>zhuifengren</div>
`
});我們把之前的<div>hello</div> 和<div>zhuifengren</div> 分別封裝在了組件中，然后直接將組件名作為標(biāo)簽即可。
組件名稱的命名規(guī)范：建議使用全小寫字母，單詞之間使用 “-” 連接。
2.3 組件中包含變量
const app = Vue.createApp({
template:`
<div>
<count-com />
</div>
`
});
app.component('count-com', {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">加1</button>
`
});
2.4 組件的復(fù)用
const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
</div>
`
});從這個例子能看出來，組件的好處就是可以復(fù)用，且組件中的變量是獨享的。
2.5 組件中使用組件
const app = Vue.createApp({
template:`
<div>
<count-com />
<count-com />
<count-com />
<count-com-2 />
</div>
`
});
app.component('count-com-2', {
template: `
<count-com />
`
});我們在另一個組件 count-com-2 中使用 count-com 組件，也是可以的。
2.6 總結(jié)
全局組件，使用起來很簡單，只需要使用 app.component 函數(shù)聲明一下即可。
一個全局組件可以被另一個全局組件使用。
但全局組件，只要聲明，即使不使用也會被初始化，影響性能。
3. 局部組件
3.1 局部組件的使用
<body>
<div id="myDiv"></div>
</body>
<script>
const CountCom = {
data() {
return {
count : 1
}
},
template: `
<div>{{count}}</div>
<button @click="count += 1">自增</button>
`
}
const app = Vue.createApp({
// 組件映射
components : {
'count-com': CountCom
},
template:`
<div>
<count-com/>
</div>
`
});
const vm = app.mount("#myDiv");局部組件的寫法是，首先聲明一個對象，內(nèi)容和全局組件類似，然后將組件與對象做一個映射。
3.2 總結(jié)
局部組件聲明的對象建議首字母大寫，單詞間使用駝峰命名。
映射時，組件的名稱還保持全小寫字母，單詞之間使用 “-” 連接。
局部組件，如果不使用，就不會初始化，因此對性能有好處。
附：vue 3 組件的分類 全局組件與局部組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件的分類</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="itany">
<my-hello></my-hello>
<my-world></my-world>
</div>
<script>
/**
* 全局組件，可以在所有vue實例中使用
*/
Vue.component('my-hello',{
template:'<h3>{{name}}</h3>',
data:function(){ //在組件中存儲數(shù)據(jù)時，必須以函數(shù)形式，函數(shù)返回一個對象
return {
name:'alice'
}
}
});
/**
* 局部組件，只能在當(dāng)前vue實例中使用
*/
var vm=new Vue({
el:'#itany',
data:{
name:'tom'
},
components:{ //局部組件
'my-world':{
template:'<h3>{{age}}</h3>',
data(){
return {
age:25
}
}
}
}
});
</script>
</body>
</html>總結(jié)
今天聊了一下 VUE3 的 全局組件與局部組件，希望可以對大家的工作有所幫助
到此這篇關(guān)于VUE3學(xué)習(xí)教程之全局組件和局部組件的文章就介紹到這了,更多相關(guān)VUE3全局組件和局部組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Node.js使用orm2進(jìn)行update操作時關(guān)聯(lián)字段無法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進(jìn)行update操作時關(guān)聯(lián)字段無法修改的解決方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
Vue3+Three.js實現(xiàn)為模型添加點擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標(biāo)位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
使用v-for指令的時候遇到一個錯誤問題，具體錯誤代碼在文章給大家列出，對vue v-for使用問題感興趣的朋友跟隨小編一起學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue3中的render函數(shù)里定義插槽和使用插槽方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)商城購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07