這個要單獨寫，原文是這么描述vue的組件的：組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
這個特性我感覺比較難理解，一步步來，看看組件到底是個什么東西？
1.舉個栗子
//model層：// 通過extend方式定義一個Vue組件var MyComponent = Vue.extend({template: '<div>A custom component!</div>'})// 向Vue注冊這個組件，名稱定為my-componentVue.component('my-component', MyComponent)// 創建根實例new Vue({el: '#example'})//Vue層：<div id="example"><my-component></my-component></div>渲染為：
<div id="example"><div>A custom component!</div></div>
就是這個栗子，差點把我忽悠了，以為前面對extend的概念理解錯了。還記得前面是這么描述
var MyComponent = Vue.extend（）的，Vue相當于基類，MyComponent繼承了Vue，擁有了Vue的屬性和方法，但是繼承的概念還有另一層，就是基類是木有子類自定義的屬性和方法的。這里的子類MyComponent擴展了一個屬性template，按照繼承的說法，Vue基類是不能使用的，但是這個栗子看似違背了這個規則，最后創建的是Vue實例，同時讓模板生效了。正常的寫法不是應該這樣：
//model層：// 通過extend方式定義一個Vue組件var MyComponent = Vue.extend({template: '<div>A cu stom component!</div>'})// 不用注冊//Vue.component('my-component', MyComponent)// 創建MyComponent 實例new MyComponent ({el: '#example'})//Vue層：<div id="example">//不用組件//<my-component></my-component></div>經過試驗，這種寫法確實沒錯，也可以正常顯示。問題來了，為什么第一種寫法也是可以的，比較兩處代碼，發現第一種寫法有一個注冊過程，注冊了一個my-component,最后使用的也是這個my-component，仔細想想，并不是說Vue實例可以使用template，而是向Vue注冊了這個組件后，Vue實例就可以使用這個組件了，所以并不沖突。（嚇死寶寶了- -）
想清楚這個后，再來考慮另外一個問題，這兩種寫法的區別在于哪里？
有沒有發現，第二種寫法其實是很有限制的，他替換了整個div，不管div中有多少內容。比如：
<div id="example">ssssdfsdaf<button>abc</button></div>
最后統統不見，被替換成<div>A cu stom component!</div>。靈活度太低，如果我只想替換ssssdfsdaf怎么辦？所以就要用第一種方式了，于是幡然醒悟，原來這就是組件，就像一個零件一樣，想往哪塞就往哪塞：
<div id="example"><my-template>ssssdfsdaf<my-template><button>abc</button></div>
另外，注冊必須在新建實例前，反過來的話，新建的實例肯定不能使用組件的。
原文還說replace可以決定是否替換，這個不知道咋用，先留一坑在這，后面看看能否用上。 //坑1
2.組件注冊有兩種方式：
一是前面看到的全局注冊方式，Vue.component，這種全局可用。
二是局部注冊方式
// 局部注冊也可以這么做var Parent = Vue.extend({components: {'my-component': {template: '<div>A custom component!</div>'}}})這種寫法最簡，很明顯Parent擴展了Vue，擁有了組件my-component。此時的組件只有Parent能用，Vue不能用。
3.is屬性
組件在使用的過程中也是有限制的。原因在于：
Vue 的模板是 DOM 模板，使用瀏覽器原生的解析器而不是自己實現一個。所以組件被替換后必須依照html的正常標準來，它必須是有效的 HTML 片段。一些 HTML 元素對什么元素可以放在它里面有限制。常見的限制：
a 不能包含其它的交互元素（如按鈕，鏈接）
ul 和 ol 只能直接包含 li
select 只能包含 option 和 optgroup
table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
tr 只能直接包含 th 和 td
以table為例
<table><my-component></my-component><my-component></my-component></table>// 定義var MyComponent = Vue.extend({template: '<tr>A custom component!</tr>'})這樣的寫法看似正常，因為<table><tr></tr></table>結構是正常的，但是實際上不能依賴自定義組件在瀏覽器驗證之前的展開結果，所以這里不被認為是<tr>。為此，is屬性便有作用了，將以上寫法改寫：
<table><tr is="my-component"></tr> //這里改成is屬性<tr is="my-component"></tr><tr is="my-component"></tr></table>// 定義var MyComponent = Vue.extend({template: '<div>A custom component!</div>' //這里不能用tr})修改后，相當于
<table><tr><my-component></my-component></tr><tr><my-component></my-component></tr><tr><my-component></my-component></tr></table>
保留了原來的tr，所以dom解析不會出錯
4.Props：組件通訊的手段
4.1“prop” 是組件數據的一個字段，期望從父組件傳下來。子組件需要顯式地用 props 選項 聲明 props：
Vue.component('child', {// 聲明 props，這里駝峰式命名props: ['myMessage'],//模板中可以這樣用template: '<span>{{ myMessage }}</span>'})HTML 特性不區分大小寫。名字形式為 camelCase 駝峰式的 prop 用作特性時，需要轉為 kebab-case（短橫線隔開），所以html中是這個樣子的：
<!-- kebab-case in HTML --><child my-message="hello!"></child>
以上這種是props的靜態用法，也可以用 v-bind 綁定動態 Props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：
<div><input v-model="parentMsg"><br><child v-bind:my-message="parentMsg"></child></div>
這時候看到v-model有點懵逼，這貨不是跟{{}}類似，引用data屬性中的parentMsg嗎？此時肯定是沒有定義parentMsg的，所以v-bind：my-message=”parentMsg”綁定組件的同時，賦予了父組件parentMsg屬性。
4.2 prop的綁定類型：
prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態――這會讓應用的數據流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：
<!-- 默認為單向綁定 --><child :msg="parentMsg"></child><!-- 雙向綁定 --><child :msg.sync="parentMsg"></child><!-- 單次綁定 --><child :msg.once="parentMsg"></child>
雙向綁定會把子組件的 msg 屬性同步回父組件的 parentMsg 屬性。單次綁定在建立之后不會同步之后的變化。這里原文還特定強調了下， prop 是一個對象或數組時，是按引用傳遞，修改內容會隨時修改父組件內容，這個有語言基礎的都知道。
4.3 prop驗證：
組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象({}而不是[])，包含驗證要求：
Vue.component('example', {props: {// 基礎類型檢測 （`null` 意思是任何類型都可以）propA: Number,// 多種類型 (1.0.21+)propM: [String, Number],// 必需且是字符串propB: {type: String,required: true},// 數字，有默認值propC: {type: Number,default: 100},// 對象/數組的默認值應當由一個函數返回propD: {type: Object,default: function () {return { msg: 'hello' }}},// 指定這個 prop 為雙向綁定// 如果綁定類型不對將拋出一條警告propE: {twoWay: true},// 自定義驗證函數propF: {validator: function (value) {return value > 10}},// 轉換函數（1.0.12 新增）// 在設置值之前轉換值propG: {coerce: function (val) {return val + '' // 將值轉換為字符串}},propH: {coerce: function (val) {return JSON.parse(val) // 將 JSON 字符串轉換為對象}}}})type 可以是下面原生構造器：
String
Number
Boolean
Function
Object
Array
type 也可以是一個自定義構造器，使用 instanceof 檢測。
當 prop 驗證失敗了，Vue 將拒絕在子組件上設置此值，如果使用的是開發版本會拋出一條警告。
這里也是看的我一臉懵逼，連個栗子都不給，拿剛才的例子改一下打個比方
Vue.component('child', {// 聲明 props，這里駝峰式命名props: ['myMessage'],//模板中可以這樣用template: '<span>{{ myMessage+1}}</span>' //改成表達式})<!-- kebab-case in HTML --><child my-message="hello!"></child> //這里先不改如果我們希望別人把child組件的myMessage當做Number類型來處理，而我們這里又沒有做prop驗證，結果就是{{ myMessage+1}}會變成字符串拼接，當html傳入的是hello!,渲染出來結果：hello!
所以說，告訴別人這里要傳入Number類型是必要的，于是改為：
Vue.component('child', {// 聲明 props，這里駝峰式命名props: {myMessage:Number},//模板中可以這樣用template: '<span>{{ myMessage+1}}</span>' //改成表達式})這時候如果傳入hello！，此時渲染結果？沒錯，就是NaN。這樣別人就知道要傳入一個數字了。
如果這樣傳入
<child my-message="123"></child> //改成123
這樣總行了吧，運行，他喵的居然還不行，還是NaN。原文有這樣的解釋：
//#字面量語法 vs. 動態語法//初學者常犯的一個錯誤是使用字面量語法傳遞數值：<!-- 傳遞了一個字符串 "1" --><comp some-prop="1"></comp>因為它是一個字面 prop，它的值以字符串 "1" 而不是以實際的數字傳下去。如果想傳遞一個實際的 JavaScript 數字，需要使用動態語法，從而讓它的值被當作 JavaScript 表達式計算：<!-- 傳遞實際的數字 --><comp :some-prop="1"></comp>
好吧，也就是說剛才傳遞的實際上是字符串”123”，結果必然是NaN,再改：
<child :my-message="123"></child> //改成123
此時{{myMessage+1}}會得到正確的結果：124
以上所述是小編給大家介紹的JS框架之vue.js(深入三:組件1），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
