定義Vue元件
- 什麼是子產品化：子產品化是從代碼的角度出發，分析項目，把項目中一些功能類似的代碼，單獨的抽離為一個個的子產品；那麼為了保證大家以相同的方式去封裝子產品，于是我們就創造了子產品化的規範（CommonJS規範）；
- 子產品化的好處：友善項目的開發；和後期的維護與擴充；今後如果需要某些固定功能的子產品，則直接拿來引用就行，提高了項目開發效率！
- 什麼是元件化：從UI的角度出發考慮問題，把頁面上有重用性的UI解構和樣式，單獨的抽離出來，封裝為單獨的元件；
- 元件化的好處：随着項目規模的發展，我們手裡的元件，會越來越多，這樣，我們今後一個頁面中的UI，幾乎都可以從手中拿現成的元件拼接出來；友善項目的開發和維護；
全局元件定義的三種方式
第一種方式：
1.先調用 Vue.extend() 得到元件的構造函數：
// 建立全局元件的第一種方式： component
const com1 = Vue.extend({
template: '<h1>這是建立的第一個全局元件</h1>' // template 屬性，表示這個元件的 UI 代碼解構
})
2.通過 Vue.component(‘元件的名稱’, 元件的構造函數) 來注冊全局元件：
// 使用 Vue.component 向全局注冊一個元件
// Vue.component('元件的名稱', 元件的構造函數)
Vue.component('mycom1', com1)
3.把注冊好的全局元件名稱，以标簽形式引入到頁面中即可：
<!--如何引入一個全局的Vue元件呢？直接把元件的名稱，以标簽的形式，放到頁面上就好了！-->
<mycom1></mycom1>
第二種方式：
1.直接使用 Vue.component(‘元件名稱’, { 元件模闆對象 })
const com2Obj = {
// 1. template 屬性中，不能單獨放一段文本，必須用标簽包裹起來；
// 2. 如果在 template 屬性中，想要放多個元素了，那麼，在這些元素外，必須有唯一的一個根元素進行包裹；
template: '<div><h2>這是直接使用 Vue.component 建立出來的元件</h2><h3>哈哈</h3></div>'
}
// 定義全局的元件
// Vue.component 的第二個參數，既接收 一個 元件的構造函數， 同時，也接受 一個對象
Vue.component('mycom2', com2Obj)
第三種方式：
1.先使用 template 标簽定義一個模闆的代碼解構：
<!-- 定義一個 template 标簽元素 -->
<!-- 使用 Vue 提供的 template 标簽，可以定義元件的UI模闆解構 -->
<template id="tmpl">
<div>
<h3>哈哈，這是在外界定義的元件UI解構</h3>
<h3>我是來搗亂的</h3>
</div>
</template>
2.使用 Vue.component 注冊元件：
// 這是定義的全局元件
Vue.component('mycom3', {
template: '#tmpl'
})
元件中展示資料和響應事件
Vue.component('mycom', {
template: '<h3 @click="show">這是自定義的全局元件：{{ msg }}</h3>',
data: function () { // 在 元件中，可以有自己的私有資料，但是，元件的 data 必
須是一個 function，并且内部 return 一個 資料對象
return {
msg: '哈哈哈'
}
},
methods: { // 嘗試定義元件的私有方法
show() {
console.log('出發了元件的私有show方法！')
}
}
})
為什麼元件中的data屬性必須定義為一個方法并傳回一個對象？
如果傳回的不是一個對象，那麼做計數器案例時所有的元件都會增加
官方解釋：
元件會被用來建立多個執行個體，如果data是個純粹的對象，那麼是以執行個體将會引用同一個資料對象。是以每個元件都傳回了一個新的初始變量，這樣元件間不會互相幹擾。
父元件向子元件傳值
父元件向子元件傳遞普通資料
傳遞資料使用v-bind(：), 傳遞的資料需要使用props注冊才能使用
1.把要傳遞給子元件的資料，作為 自定義屬性，通過 v-bind: 綁定到子元件身上：
2.在子元件中，不能直接使用父元件傳遞過來的資料，需要先使用props 數組來接收一下：
3.注意：在接收父元件傳遞過來的 props的時候，接收的名稱，一定要和父元件傳遞過來的自定義屬性，名稱保持一緻！
父元件向子元件傳遞方法
1.把要傳遞給子元件的方法，作為 自定義屬性，通過 v-on: 綁定到子元件身上：
2.調用父元件傳來的方法
components: {
'com1': {
template: `<div>
<!-- 當點選子元件的 按鈕時候， 調用一下 父元件傳遞過來的 func 方法 -->
<input type="button" value="這是子元件的按鈕" @click="btnClick" />
</div>`,
data() { // 子元件的資料
return {
sonMsg: '這是子元件中的資料'
}
},
methods: {
btnClick() {
// 調用一下 父元件傳遞過來的 func 方法
// 子元件向父元件傳值，本質上，還是調用了父元件傳遞過來的方法，隻不過，子元件在調用的時候，把 資料 當作參數，傳給這個方法了；
this.$emit('func1', this.sonMsg)
}
}
}
}
總結:
傳遞資料使用v-bind(：), 傳遞的資料需要使用props注冊才能使用
傳遞方法使用v-on(@),傳遞的方法需要使用$emit來喚醒觸發方法
無論是傳遞資料還是方法,都是需要使用v-bind或者v-on 指派一個變量供子元件調用,然後變量指向父元件中的屬性或者方法
在Vue元件中data和props的差別
- data 在元件中，要被定義成function并傳回一個對象
- props在元件中，要被定義成數組，其中，數組的值都是字元串名，表示父元件傳遞過來的資料；
- props的資料，不要直接拿來修改，如果想要修改，必須在 data 上重新定義一個 屬性，然後把屬性的值 從 this.props 拿過來；
data 上的資料，都是元件自己私有的， data 上的資料，都是可讀可寫的
props 資料，都是外界傳遞過來的資料，props中的資料隻能讀取，不能重新寫入
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)