[TOC]
## 小程序vue对比
[小程序](https://www.kancloud.cn/book/henputongderen/xiaochengxu/edit)
[vue](https://www.kancloud.cn/book/henputongderen/vuexuexi/edit)
## 知识点
### 1.循环
```
{this.state.list.map((item, index) => {
return
<TodoItem key={index} content={item} index={index} handleItem={this.handleDelete.bind(this)}></TodoItem>
})}
```
### 2.父子组件通信
#### 父向子
```
1传值
<TodoItem
key={index} content={item} index={index}
handleItem={this.handleDelete.bind(this)}></TodoItem>
```
```
2.接值
constructor(props){
super(props)
}
直接调用不用注册
{this.props.content}
```
#### 子向父
```
1.传值
onClick={this.handleClick.bind(this)}
handleClick(){
this.props.handleItem(this.props.index)
}
```
```
2.将组件导入
import TodoItem from './components/Todoitem'
3.接值
handleItem={this.handleDelete.bind(this)}
```
## 代码
```
import React, { Component } from 'react';
import TodoItem from './components/Todoitem'
import axios from 'axios-jsonp-pro'
class App extends Component {
constructor(props) {
super(props);
this.state = {
value: "hello",
list: []
}
}
render() {
return (
<div className="App">
<input value={this.state.value} onChange={this.handleChange.bind(this)} />
<button onClick={this.handleClick.bind(this)}>确定</button>
{this.state.list.map((item, index) => {
return <TodoItem key={index} content={item} index={index} handleItem={this.handleDelete.bind(this)}></TodoItem>
})}
</div>
);
}
handleChange(e) {
var value = e.target.value;
this.setState({
value
})
}
handleClick() {
/*
解构语法更简洁
var {list,value} = this.state;
list.unshift(value)
*/
var list = this.state.list;
if (!list.includes(this.state.value)) {
list.unshift(this.state.value)
this.setState({
list
})
}
}
handleDelete(index) {
console.log(index)
var { list } = this.state;
list.splice(index, 1);
this.setState({
list
})
}
componentDidMount(){
var url="https://douban.uieee.com/v2/movie/subject/30140571";
axios.jsonp(url).then(res=>{
console.log(res)
})
}
}
export default App;
```
```
import React ,{Component} from 'react'
class TodoItem extends Component{
constructor(props){
super(props)
}
render(){
return(
<div onClick={this.handleClick.bind(this)}>
{this.props.content}
</div>
)
}
handleClick(){
this.props.handleItem(this.props.index)
}
}
export default TodoItem
```
