vue組件的寫法有哪些

這篇文章主要為大家展示了“vue組件的寫法有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue組件的寫法有哪些”這篇文章吧。

數據驅動和組件化是vue.js兩個最重要的特點。組件化是為了方便代碼復用，提高開發效率。常見的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結構內容，實現結構與邏輯分離；

實例：

Welcome組件

4、單文件組件

結構：

<template lang="html"> 
 // 組件中的html結構 
</template> 
<script> 
 //組件的邏輯 
 export default { 
 // 組件的屬性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 組件的樣式 
</style>

創建一個尾綴為vue的文件，文件名即為組件名。組件內包含三部分內容：html結構、js邏輯、css樣式，分別對應于不同的標簽。使用時組件時，通過import引入即可使用。

特點：

<1>組件與組件之間互不影響，復用性高，其html、css、js均可復用；

<2>組件的結構、邏輯清晰；

<3>適用于大型復雜項目，適合多人開發；

實例：

Welcome組件

！！！需要注意的是：template標簽內必須用一個標簽將所有的標簽包裹，否則會報錯

正確的寫法：

<template> 
 <div> 
 <div></div> 
 ...... 
 <div></div> 
 </div> 
</template>

錯誤的寫法：

<template> 
 <div></div> 
 <div></div> 
 ...... 
 <div></div> 
</template>

以上是“vue組件的寫法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！