组件通信-父传子组件通信

在学习组件通信之前，我们需要首先了解一下什么是组件，以及组件通信的意义是什么？

1.什么是组件？

        组件是可以重复利用的一段html的代码片段，组件复用的是HTML的结构和css的样式

2.组件通信的意义是什么？

        使组件结构或者数据更加的灵活，得到更高的复用效果

3.组件通信需要符合什么标准?

        单向数据流，就是满足父传子的通信方式

4.父传子组件通信流程？

•  把父组件中需要拆分的html代码拷贝到子组件中，父组件中把组件引入，直接挂载
• 在父组件中的子组件标签上绑定一个自定义的属性，传递数据到子组件中去
•  子组件中的props来接收父组件传递过来的数据，class类组件： this.props，函数组件 ：props

 

如上图所示，我们为了节省代码，用最少的代码，实习最完整的功能，所以我们用到了拆分组件，把 相同的结构拆分到一个子组件中，然后通过父传子的方式，传递数据

代码演示

父组件

export default class App extends Component {
  constructor(){
    super()
    this.state={
      list1:['温柔','善良','漂亮'],
      list2:['12k-15k','15k-20k','20k-25k']
    }
  }
  render() {
    let {list1,list2}=this.state
    return (
      <div className='app'>
        <input type="text" placeholder='请输入自己喜欢的类型'/>
        <List list={list1}></List>
        <hr />
        <input type="text" placeholder='请输入期望薪资'/>
        <List list={list2}></List>
      </div>
    )
  }
}

在父组件中引入子组件， 在子组件上绑定一个list属性，传递数据到子组件中

子组件

export default function List(props) {
    let {list}=props
  return (
    <div>
         <ul>
          {list.map((item,index)=>{
            return (
              <li  key={index}>{item}</li>
            )
          })}
        </ul>
    </div>
  )
}

子组件中，我们使用函数组件，直接调用props方法接收传递过来的数据