那麼什麼是Vue元件呢？它是vue.js最強大的功能之一，是可擴充套件的html元素，是封裝可重用的程式碼，同時也是Vue例項，可以接受相同的選項物件(除了一些根級特有的選項) 並提供相同的生命週期鉤子。這麼說我相信很多人都理解了。
元件系統是Vue.js其中一個重要的概念，它提供了一種抽象，讓我們可以使用獨立可複用的小元件來構建大型應用，任意型別的應用介面都可以抽象為一個元件樹：
那麼什麼是元件呢？ 元件可以擴充套件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 後才能獲取模板內容。尤其像這些元素
，
，，