我們為什麼要用Vue.js的組件化開發

那麼什麼是Vue組件呢？它是vue.js最強大的功能之一，是可擴展的html元素，是封裝可重用的代碼，同時也是Vue實例，可以接受相同的選項對象(除了一些根級特有的選項) 並提供相同的生命周期鉤子。這麼說我相信很多人都理解了。

組件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可復用的小組件來構建大型應用，任意類型的應用界面都可以抽象為一個組件樹：

載入超時，點擊重試

image.png

那麼什麼是組件呢？

組件可以擴展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素。

使用組件的好處？

提高開發效率

方便重複使用

簡化調試步驟

提升整個項目的可維護性

便於多人協同開發

如何註冊組件？

需要使用Vue.extend方法創建一個組件，然後使用Vue.component方法註冊組件。Vue.extend方法格式如下

var MyComponent = Vue.extend({
// 選項...後面再介紹
})


如果想要其他地方使用這個創建的組件，還得個組件命個名：

Vue.component(my-component, MyComponent)


命名之後即可在HTML標籤中使用這個組件名稱，像使用DOM元素一樣。下面來看看一個完整的組件註冊和使用例子。

//html代碼：
<div id="example">
<my-component></my-component>
</div>
//js代碼：
// 定義
var MyComponent = Vue.extend({
template: <div>A custom component!</div>
})
// 註冊
Vue.component(my-component, MyComponent)
// 創建根實例
new Vue({
el: #example
})


輸出結果為：

<div id="example">
<div>A custom component!</div>
</div


組件之間的通信

父組件要給子組件傳遞數據，

子組件需要將它內部發生的事情告訴父組件(利用事件的訂閱發布模式)

1.給子組件的template上的元素綁定事件（如click），執行子組件的方法（如changeData），子組件的方法中發射一個事件（如s），傳一個數據（如lalala）；

2.父組件中，定義一個方法（如getData）用來拿到子組件的數據。

3.在自定義的組件上綁定子組件傳過去的事件（s），執行事件（s）執行的是getData函數，getData函數中拿到數據（data，就是子組件傳過去的lalala）數據同步

<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
<h1>父組件 <mark>{{msg.name}}</mark></h1>
<children :n="msg"></children>
</div>
</template>
<template id="children">
<h2 @click="changeData">子組件 {{n.name}}</h2>
</template>
<script>
//數據同步的核心：父組件給子組件傳遞「引用數據類型的數據」；
var app=new Vue({
el:#app,
components:{
parent:{
template:#parent,
data(){
return {msg:{name:hahha}}
},
components:{
children:{
props:[n],
template:#children,
methods:{
changeData(){
this.n.name=lallala
},
}
}
}
}
}
})
</script>//


數據不同步(不直接使用父組件傳的值，用data屬性再自己的組件內做一個中間變數，防止報錯)

<parent></parent>
</div>
<template id="parent">
<div>
<h1>父組件 <mark>{{msg}}</mark></h1>
<children :n="msg"></children>
</div>
</template>
<script>
//數據不同步的核心：中間變數接收避免報錯；
var app=new Vue({
el:#app,
components:{
parent:{
template:#parent,
data(){
return {msg:hahha}
},
components:{
children:{
props:[n],
template:<h2 @click="changeData">子組件 {{b}}</h2>,
data(){
return {b:this.n}
},
methods:{
changeData(){
this.b=lallala
},
}
}
}
}
}
})//歡迎加入全棧開發交流群一起學習交流：864305860
</script>


組件中的data必須是函數

每個組件都是互相獨立的，如果它們共用一個對象，

在更改一個組件數據的時候，會影響其它組件，如果是函數的話，

每個組件都有都是又自己獨立的數據，互相不會影響。

受限制的元素

Vue在瀏覽器解析和標準化HTML後才能獲取模板內容，

所以有些元素限制了能被它包裹的元素。

例如：ul中只能放li；select中只能放option

某些元素中放入了自定義元素，

不符合W3C標準，最終會解析錯誤。

關於DOM模板的解析

當使用 DOM 作為模版時 (例如，將 el 選項掛載到一個已存在的元素上), 你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 後才能獲取模板內容。尤其像這些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 這樣的元素只能出現在某些其它元素內部。

在自定義組件中使用這些受限制的元素時會導致一些問題，例如：

<table>
<my-row>...</my-row>
</table>


自定義組件 <my-row> 被認為是無效的內容，因此在渲染的時候會導致錯誤。這時應使用特殊的 is 屬性：

<table>
<tr is="my-row"></tr>
</table>


也就是說，標準HTML中，一些元素中只能放置特定的子元素，另一些元素只能存在於特定的父元素中。比如table中不能放置div，tr的父元素不能div等。所以，當使用自定義標籤時，標籤名還是那些標籤的名字，但是可以在標籤的is屬性中填寫自定義組件的名字。

應當注意，如果您使用來自以下來源之一的字元串模板，這些限制將不適用：

<script type="text/x-template">

JavaScript 內聯模版字元串

.vue 組件

其中，前兩個模板都不是Vue官方推薦的，所以一般情況下，只有單文件組件.vue可以忽略這種情況。