什么是組件？
Vue 和其他現(xiàn)代的前端框架得名于把大型網(wǎng)頁分割成為一個個小小的獨立的組件，那么我們今天就來看看怎樣定義和制作一個我們自己的組件吧耸别！
-
Component ：
可以預(yù)見的是装盯，在后續(xù)開發(fā)的更新中，TodoList 的每一條數(shù)據(jù)的展示形式可能會變得極其復(fù)雜伺绽，所以我們可以嘗試著把 TodoList 的每一個單條目拆成一個組件蕊退。
在這之前我們得學(xué)習(xí)一下 Vue 中 component 的寫法：
Vue 為我們提供了定義組件的接口：
- 第一種方式是 全局組件：
Vue.component('todo-item', { template: '<li> item </li>' })- 第二種方式是 局部組件：
var todoItem = { template: '<li> item </li>' } // 定義一個 JavaScript 對象存放模板信息 new Vue({ el: "#app", components: { 'todo-item' todoItem } data() { ... } methods: { ... } })
-
我們這里先采用 全局組件，這樣對教學(xué)方便一些：
既然我們對 <ul> 和 <li> 標(biāo)簽都需要使用到 v-for 指令憔恳，那么對此也不例外瓤荔。
想要加載出 list 數(shù)組里那么多條的數(shù)據(jù)，就也得在 todo-item 組件上加 v-for ：
<todo-item v-for="(item, index) in list" :key="index"> </todo-item>可是這樣每次顯示出來的都只是 item ：
1545908493152.png
-
說明我們的工作還沒完成钥组，接著前進输硝！
我們需要在 todo-item 元素標(biāo)簽內(nèi)加入屬性，以 v-bind 的形式把 循環(huán)單次變量 item 綁定成一個參數(shù) content 并傳參：
<todo-item v-for="(item, index) in list" :key="index" :content="item"> </todo-item>
接下來請注意程梦！我們不能什么都不做就直接在 模板的 html 信息中直接采取 插值表達式 的寫法哦点把！
Vue.component('todo-item', {
template: '<li>{{ content }}</li>'
})
請一定要記得在 Vue.component 中加入 props ，用以接收參數(shù)：
Vue.component('todo-item',{
props: ['content']
template: '<li> {{ content }} </li>'
})
- 這樣之后屿附，效果就成啦郎逃！和之前一模一樣，但是這之后就可以完成對單個組件的升級與復(fù)用挺份。
完成效果
