[TOC]
## TodoLIst
[小程序-TodoList](http://www.hmoore.net/book/henputongderen/xiaochengxu/edit)
[React](http://www.hmoore.net/book/henputongderen/react/edit)
## 功能介紹
> 將input輸入框里的內容打印到頁面上，可以輸入多條，并可以點擊刪除
> 知識點組件傳值
## 知識細分
### 1.使用組件
```
1.定義組件 name: "ListItem",
2.引入組件 import ListItem from "../components/ListItem";
3.注冊組件 components: { ListItem },
4.使用組件 <list-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></list-item>
```
### 2.組件傳值
#### 父向子傳
```
1.傳值 <list-item v-for="(item, index) of list" :key="index"
:content="item" :index="index"
@delete="handleDelete" ></list-item>
```
```
2.接值
props: {
index:Number,
content:String
},
```
#### 子向父
```
1.傳值
綁定事件： @click="handleClick"
methods: {
handleClick(){
this.$emit('delete',this.index)
}
},
```
```
2.接值
綁定事件：@delete="handleDelete"
handleDelete(index) {
this.list.splice(index, 1);
}
```
## 完整代碼
### Home.vue
```
<template>
<div class="home">
<input type="text" v-model="value">
<button @click="handleClick">確定</button>
<ul>
<list-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ></list-item>
</ul>
</div>
</template>
<script>
import ListItem from "../components/ListItem";
export default {
name: "home",
components: {
ListItem
},
data() {
return {
value: "hello",
list: []
};
},
methods: {
handleClick() {
if (!this.list.includes(this.value)) {
this.list.unshift(this.value);
}
},
handleDelete(index) {
this.list.splice(index, 1);
}
}
};
</script>
```
### ListItem.vue
```
<template>
<li @click="handleClick">{{content}}</li>
</template>
<script>
export default{
name: "ListItem",
props: {
index:Number,
content:String
},
methods: {
handleClick(){
this.$emit('delete',this.index)
}
},
}
</script>
```
