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的標籤內。

特點：

可以直接在html檔案中的script標籤內直接定義與使用；

透過此方法定義的元件是全域元件，在任何Vue實例下都可以使用，適合項目比較簡單的場景；

每次定義元件時都要重新使用Vue.component()，且元件名稱不能相同；

實例：

Welcome元件

##2、局部元件

結構：

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

在script標籤中透過定義一個元件對象，並透過Vue實例中components屬性將該元件註冊呼叫。

特點：

與全域方式定義的元件相似，都可以直接在html檔案中的script標籤中直接書寫元件與使用；

只有在註冊過的Vue實例中才能使用該元件；

#實例：##Welcome元件

#3、使用template標籤結構：

<template> 
 // 组件的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引用。

特點：

js檔案中不包含html結構內容，實作結構與邏輯分離；

實例：

Welcome元件

##4、單一檔案元件

結構：

<template> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style> 
 // 组件的样式 
</style>

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

特點：

元件與元件之間互不影響，且重複使用性高，其html、css、js皆可重複使用；

元件的結構、邏輯清晰；

適用於大型複雜項目，適合多人開發；

實例：

Welcome元件

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

正確的寫法：

<template> 
 <p> 
 </p>
<p></p> 
 ...... 
 <p></p> 
  
</template>

錯誤的寫法：

<template> 
 <p></p> 
 <p></p> 
 ...... 
 <p></p> 
</template>

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue2.0操作active其他選項互斥

vuex頁面刷新後無法儲存資料怎麼處理

以上是vue全域元件總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！