數(shù)據(jù)驅(qū)動(dòng)和組件化是vue.js兩個(gè)最重要的特點(diǎn)。組件化是為了方便代碼復(fù)用，提高開發(fā)效率。常見的vue組件寫法有四種，各有特色，適用于不同的場(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)通過Vue.component()定義一個(gè)全局組件，并通過new Vue()實(shí)例將組件應(yīng)用到html文件中id為app的標(biāo)簽內(nèi)。

特點(diǎn)：

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

<2>通過該方法定義的組件是全局組件，在任何Vue實(shí)例下都可以使用，適合項(xiàng)目比較簡單的場(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)簽中通過定義一個(gè)組件對(duì)象，并通過Vue實(shí)例中components屬性將該組件注冊(cè)調(diào)用。

特點(diǎn)：

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

<2>只有在注冊(cè)過的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)寫在body標(biāo)簽內(nèi)部，在script標(biāo)簽內(nèi)按照全局組件和局部組件的方式注冊(cè)與使用。不同之處在于組件中template屬性是通過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í)，通過import引入即可使用。

特點(diǎn)：

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

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

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

實(shí)例：

Welcome組件

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

正確的寫法：

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

錯(cuò)誤的寫法：

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

總結(jié)

以上所述是小編給大家介紹的vue組件的寫法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論