vue組件的寫法匯總
數(shù)據(jù)驅動和組件化是vue.js兩個最重要的特點。組件化是為了方便代碼復用，提高開發(fā)效率。常見的vue組件寫法有四種，各有特色，適用于不同的場景。
1、全局組件
結構：
// 組件的注冊
Vue.component( 'componentName', {
template: // 組件的html結構,
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
})
// 組件的使用
new Vue({
el: '#app'
})
在script標簽內通過Vue.component()定義一個全局組件，并通過new Vue()實例將組件應用到html文件中id為app的標簽內。
特點：
<1>可以直接在html文件中的script標簽內直接定義與使用；
<2>通過該方法定義的組件是全局組件，在任何Vue實例下都可以使用，適合項目比較簡單的場景；
<3>每次定義組件時都要重新使用Vue.component()，且組件名不能相同；
實例：
Welcome組件
2、局部組件
結構：
// 構造組件對象
const componentName = {
template: // 組件的html結構,
data(){
return{
// 組件中的屬性
}
},
method: {
// 組件中的方法
}
...... // 組件其他的屬性和方法
}
// 組件的使用
new Vue({
el: '#app',
components: {
// 組件注冊、調用
componentName
}
})
在script標簽中通過定義一個組件對象，并通過Vue實例中components屬性將該組件注冊調用。
特點：
<1>與全局方式定義的組件相似，都可以直接在html文件中的script標簽中直接書寫組件與使用；
<2>只有在注冊過的Vue實例中才能使用該組件；
實例：
Welcome組件
3、使用template標簽
結構：
<template id="componnet">
// 組件的html結構
</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: {
// 組件注冊、調用
componentName
}
})
使用template標簽將組件中的html結構寫在body標簽內部，在script標簽內按照全局組件和局部組件的方式注冊與使用。不同之處在于組件中template屬性是通過id引用。
特點：
<1>js文件中不包含html結構內容，實現(xiàn)結構與邏輯分離；
實例：
Welcome組件
4、單文件組件
結構：
<template lang="html">
// 組件中的html結構
</template>
<script>
//組件的邏輯
export default {
// 組件的屬性和方法
}
</script>
<style lang="css" scoped>
// 組件的樣式
</style>
創(chuàng)建一個尾綴為vue的文件，文件名即為組件名。組件內包含三部分內容：html結構、js邏輯、css樣式，分別對應于不同的標簽。使用時組件時，通過import引入即可使用。
特點：
<1>組件與組件之間互不影響，復用性高，其html、css、js均可復用；
<2>組件的結構、邏輯清晰；
<3>適用于大型復雜項目，適合多人開發(fā)；
實例：
Welcome組件
?。?！需要注意的是：template標簽內必須用一個標簽將所有的標簽包裹，否則會報錯
正確的寫法：
<template> <div> <div></div> ...... <div></div> </div> </template>
錯誤的寫法：
<template> <div></div> <div></div> ...... <div></div> </template>
總結
以上所述是小編給大家介紹的vue組件的寫法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
對請求的封裝在實際項目中是十分必要的,它可以讓我們統(tǒng)一處理 http 請求,比如做一些攔截,處理一些錯誤等,本篇文章將詳細介紹如何封裝 axios 請求,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了SpringBoot+Vue3實現(xiàn)上傳文件功能，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
vue中get方法\post方法如何傳遞數(shù)組參數(shù)詳解
在前后端交互的時候,有時候需要通過get或者delete傳遞一個數(shù)組給后臺,下面下面這篇文章主要給大家介紹了關于vue中get方法\post方法如何傳遞數(shù)組參數(shù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue slot 在子組件中顯示父組件傳遞的模板,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue微信項目按需授權登錄策略實踐思路詳解,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了socket io與vue-cli的結合使用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了關于新建的vue3項目一直提示代碼格式警告的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中iframe?結合?window.postMessage?實現(xiàn)跨域通信
window.postMessage()?方法可以安全地實現(xiàn)跨源通信，在一個項目的頁面中嵌入另一個項目的頁面，需要實現(xiàn)父子，子父頁面的通信，對Vue中iframe?結合?window.postMessage?實現(xiàn)跨域通信相關知識感興趣的朋友跟隨小編一起看看吧2022-12-12