vue組件的寫(xiě)法有哪些

這篇文章主要為大家展示了“vue組件的寫(xiě)法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue組件的寫(xiě)法有哪些”這篇文章吧。

數(shù)據(jù)驅(qū)動(dòng)和組件化是vue.js兩個(gè)最重要的特點(diǎn)。組件化是為了方便代碼復(fù)用，提高開(kāi)發(fā)效率。常見(jiàn)的vue組件寫(xiě)法有四種，各有特色，適用于不同的場(chǎng)景。

1、全局組件

結(jié)構(gòu)：

// 組件的注冊(cè) 
Vue.component( 'componentName', { 
 template: // 組件的html結(jié)構(gòu), 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
}) 
// 組件的使用 
new Vue({ 
 el: '#app' 
})

在script標(biāo)簽內(nèi)通過(guò)Vue.component()定義一個(gè)全局組件，并通過(guò)new Vue()實(shí)例將組件應(yīng)用到html文件中id為app的標(biāo)簽內(nèi)。

特點(diǎn)：

<1>可以直接在html文件中的script標(biāo)簽內(nèi)直接定義與使用；

<2>通過(guò)該方法定義的組件是全局組件，在任何Vue實(shí)例下都可以使用，適合項(xiàng)目比較簡(jiǎn)單的場(chǎng)景；

<3>每次定義組件時(shí)都要重新使用Vue.component()，且組件名不能相同；

實(shí)例：

Welcome組件

2、局部組件

結(jié)構(gòu)：

// 構(gòu)造組件對(duì)象 
const componentName = { 
 template: // 組件的html結(jié)構(gòu), 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
} 
// 組件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 組件注冊(cè)、調(diào)用 
 componentName 
 } 
})

在script標(biāo)簽中通過(guò)定義一個(gè)組件對(duì)象，并通過(guò)Vue實(shí)例中components屬性將該組件注冊(cè)調(diào)用。

特點(diǎn)：

<1>與全局方式定義的組件相似，都可以直接在html文件中的script標(biāo)簽中直接書(shū)寫(xiě)組件與使用；

<2>只有在注冊(cè)過(guò)的Vue實(shí)例中才能使用該組件；

實(shí)例：

Welcome組件

3、使用template標(biāo)簽

結(jié)構(gòu)：

<template id="componnet"> 
 // 組件的html結(jié)構(gòu) 
</template> 
// 全局組件的注冊(cè)與使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部組件的注冊(cè)與使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 組件中的屬性 
 } 
 }, 
 method: { 
 // 組件中的方法 
 } 
 ...... // 組件其他的屬性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 組件注冊(cè)、調(diào)用 
 componentName 
 } 
})

使用template標(biāo)簽將組件中的html結(jié)構(gòu)寫(xiě)在body標(biāo)簽內(nèi)部，在script標(biāo)簽內(nèi)按照全局組件和局部組件的方式注冊(cè)與使用。不同之處在于組件中template屬性是通過(guò)id引用。

特點(diǎn)：

<1>js文件中不包含html結(jié)構(gòu)內(nèi)容，實(shí)現(xiàn)結(jié)構(gòu)與邏輯分離；

實(shí)例：

Welcome組件

4、單文件組件

結(jié)構(gòu)：

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

創(chuàng)建一個(gè)尾綴為vue的文件，文件名即為組件名。組件內(nèi)包含三部分內(nèi)容：html結(jié)構(gòu)、js邏輯、css樣式，分別對(duì)應(yīng)于不同的標(biāo)簽。使用時(shí)組件時(shí)，通過(guò)import引入即可使用。

特點(diǎn)：

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

<2>組件的結(jié)構(gòu)、邏輯清晰；

<3>適用于大型復(fù)雜項(xiàng)目，適合多人開(kāi)發(fā)；

實(shí)例：

Welcome組件

?。?！需要注意的是：template標(biāo)簽內(nèi)必須用一個(gè)標(biāo)簽將所有的標(biāo)簽包裹，否則會(huì)報(bào)錯(cuò)

正確的寫(xiě)法：

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

錯(cuò)誤的寫(xiě)法：

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

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