vue組件的寫法匯總
數(shù)據(jù)驅(qū)動和組件化是vue.js兩個最重要的特點。組件化是為了方便代碼復(fù)用，提高開發(fā)效率。常見的vue組件寫法有四種，各有特色，適用于不同的場景。
1、全局組件
結(jié)構(gòu)：
// 組件的注冊
Vue.component( 'componentName', {
template: // 組件的html結(jié)構(gòu),
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
})
// 組件的使用
new Vue({
el: '#app'
})
在script標簽內(nèi)通過Vue.component()定義一個全局組件，并通過new Vue()實例將組件應(yīng)用到html文件中id為app的標簽內(nèi)。
特點：
<1>可以直接在html文件中的script標簽內(nèi)直接定義與使用；
<2>通過該方法定義的組件是全局組件，在任何Vue實例下都可以使用，適合項目比較簡單的場景；
<3>每次定義組件時都要重新使用Vue.component()，且組件名不能相同；
實例：
Welcome組件
2、局部組件
結(jié)構(gòu)：
// 構(gòu)造組件對象
const componentName = {
template: // 組件的html結(jié)構(gòu),
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
}
// 組件的使用
new Vue({
el: '#app',
components: {
// 組件注冊、調(diào)用
componentName
}
})
在script標簽中通過定義一個組件對象，并通過Vue實例中components屬性將該組件注冊調(diào)用。
特點：
<1>與全局方式定義的組件相似，都可以直接在html文件中的script標簽中直接書寫組件與使用；
<2>只有在注冊過的Vue實例中才能使用該組件；
實例：
Welcome組件
3、使用template標簽
結(jié)構(gòu)：
<template id="componnet">
// 組件的html結(jié)構(gòu)
</template>
// 全局組件的注冊與使用
Vue.component( 'componentName', {
template: '#component',
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
})
new Vue({
el: '#app'
})
// 局部組件的注冊與使用
const componentName = {
template: '#component',
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
}
new Vue({
el: '#app',
components: {
// 組件注冊、調(diào)用
componentName
}
})
使用template標簽將組件中的html結(jié)構(gòu)寫在body標簽內(nèi)部，在script標簽內(nèi)按照全局組件和局部組件的方式注冊與使用。不同之處在于組件中template屬性是通過id引用。
特點：
<1>js文件中不包含html結(jié)構(gòu)內(nèi)容，實現(xiàn)結(jié)構(gòu)與邏輯分離；
實例：
Welcome組件
4、單文件組件
結(jié)構(gòu)：
<template lang="html">
// 組件中的html結(jié)構(gòu)
</template>
<script>
//組件的邏輯
export default {
// 組件的屬性和方法
}
</script>
<style lang="css" scoped>
// 組件的樣式
</style>
創(chuàng)建一個尾綴為vue的文件，文件名即為組件名。組件內(nèi)包含三部分內(nèi)容：html結(jié)構(gòu)、js邏輯、css樣式，分別對應(yīng)于不同的標簽。使用時組件時，通過import引入即可使用。
特點：
<1>組件與組件之間互不影響，復(fù)用性高，其html、css、js均可復(fù)用；
<2>組件的結(jié)構(gòu)、邏輯清晰；
<3>適用于大型復(fù)雜項目，適合多人開發(fā)；
實例：
Welcome組件
?。?！需要注意的是：template標簽內(nèi)必須用一個標簽將所有的標簽包裹，否則會報錯
正確的寫法：
<template> <div> <div></div> ...... <div></div> </div> </template>
錯誤的寫法：
<template> <div></div> <div></div> ...... <div></div> </template>
總結(jié)
以上所述是小編給大家介紹的vue組件的寫法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
ref用來輔助我們獲取DOM元素或組件的引用實例對象,每個vue的組件實例上,都包含一個refs對象,里面存儲著對應(yīng)的DOM元素或組件的引用,默認情況下,組件的refs指向一個空對象2023-03-03
今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
道axios是一個庫,并不是vue中的第三方插件,下面這篇文章主要給大家介紹了關(guān)于Vue3使用axios的配置教程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue實現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下,2024-06-06
van-picker組件default-index屬性設(shè)置不生效踩坑及解決
這篇文章主要介紹了van-picker組件default-index屬性設(shè)置不生效踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue項目base64加解密使用方式以及解密亂碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
今天小編就為大家分享一篇vue 強制組件重新渲染(重置)的兩種方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue-Router提供了hash模式和history模式兩種路由模式,hash模式URL帶#,支持低版本IE,history模式URL不帶#,需要服務(wù)器支持2025-01-01
這篇文章主要介紹了解決vue項目 build之后資源文件找不到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09