在理解入門全局組件和局部組件之前，我們有必要了解什么是“組件化”的概念。
組件化可以理解為頁面的一個(gè)組件或者一個(gè)部分，例如下圖，紅框部分可以劃分成一個(gè)組件，我們只需要寫好一個(gè)組件，然后循環(huán)數(shù)據(jù)即可。這個(gè)組件可能在在首頁、列表頁等任何地方使用，并不僅僅局限于當(dāng)前頁面。
我們?nèi)匀灰宰詈唵蔚膖odolist入門vue的全局組件和局部組件。我們把<li></li>拿出來作為一個(gè)組件，那么我們分別看看全局組件和局部組件分別如何實(shí)現(xiàn)。
全局組件
<div id="root"> <div> <input v-model="inputvalue" /> <button @click="handlesubmit">提交</button> </div> <ul> <todo-item v-bind:content="item" v-for="item in list"></todo-item> </ul> </div> <script> vue.component("todoitem",{ props:['content'], template:"<li>{{content}}</li>" }) new vue({ el:"#root", data:{ inputvalue:'', list:[] }, methods:{ handlesubmit:function(){ this.list.push(this.inputvalue) this.inputvalue = '' //每次提交后清空 } } }) </script>我們使用vue.component()來定義一個(gè)全局組件，那么這個(gè)組件在當(dāng)前頁面均可使用，而不僅僅是id="root"中。
vue.component("todoitem",{ props:['content'], template:"<li>{{content}}</li>" })todoitem是組件名稱，在html中<todo-item></todo-item>使用
props是接收參數(shù)
template定義組件樣式，或者通俗說模板
同時(shí)還需要注意這里有一個(gè)父組件向子組件傳值：
todo-item v-bind:content="item" v-for="item in list"></todo-item>我們來分析，list是輸入父組件的，todo-item屬于子組件，list中循環(huán)的數(shù)據(jù)item需要傳遞給全局組件，則用v-bind:content="item"傳遞，其中content就是子組件接收的數(shù)據(jù)，那么子組件定義接收props:['content']后，就可以template:"<li>{{content}}</li>"用content顯示數(shù)據(jù)了。
局部組件
同樣的效果，我們使用局部組件來試試。
<div id="root"> <div> <input v-model="inputvalue" /> <button @click="handlesubmit">提交</button> </div> <ul> <todo-item v-bind:content="item" v-for="item in list"></todo-item> </ul> </div> <script> var todoitem={ props:['content'], template:"<li>{{content}}</li>" } new vue({ el:"#root", data:{ inputvalue:'', list:[] }, components:{ 'todoitem':todoitem }, methods:{ handlesubmit:function(){ this.list.push(this.inputvalue) this.inputvalue = '' //每次提交后清空 } } }) </script>和全局組件不同的是，我們通過var todoitem={}定義局部組件，定義后還要在new vue中進(jìn)行聲明
components:{ 'todoitem':todoitem},那么局部組件僅僅在id="root"中使用。
好了，