1.12 组件之间是如何进行通信的

一、组件之间的通信

1. props传递值

   父组件在调用子组件时，定义一些属性，子组件可以通过接收这些属性，获取父组件传来的参数

   1. 整体接收

      interface param {
        count: string;
        msg: string;
      }
      
      // 子组件
      function Welcome(props: param) {
        return (
          <>
            <div>
              Welcome, {props.count}, {props.msg}
            </div>
          </>
        )
      }
      
      // 父组件
      function App() {
        return (
          <>
            <div>Default Template</div>
            <Welcome count="123" msg="hi Snow" />
          </>
        )
      }
      
      export default App
      

      子组件定义props用来进行进行全部参数接收

   2. 解构接收

      interface param {
          count: string
          msg: string
      }
      // 子组件
      function Welcome({ count, msg }:param) {
        return (
          <>
            <div>
              Welcome, {count}, {msg}
            </div>
          </>
        )
      }
      
      // 父组件
      function App() {
        return (
          <>
            <div>Default Template</div>
            <Welcome count="123" msg="hi Snow" />
          </>
        )
      }
      
      export default App
      

      子组件在接收时，按照es6标准定义一个结构，用于与父组件定义的名相同，以此来接收参数，进行通信

   3. 传递属性只有属性，没有值的时候：默认传递的内容为Boolean类型的true

2. props传递事件/函数

   1. props传递事件

      interface param {
        onClick2: React.MouseEventHandler<HTMLDivElement>
      }
      // 子组件
      function Welcome({ onClick2 }: param) {
        return (
          <>
            <div onClick={onClick2}>Welcome</div>
          </>
        )
      }
      
      // 父组件
      function App() {
        const handleClick = () => {
          console.log(1234)
        }
      
        return (
          <>
            <div>Default Template</div>
            <Welcome onClick2={handleClick} />
          </>
        )
      }
      
      export default App
      

      父组件定义点击事件，向子组件传递，子组件需要接收这个事件，然后在相关标签上进行调用事件，才可以实现(也就是需要通信)

   2. 传递函数

      interface param {
        onClick2: React.MouseEventHandler<HTMLDivElement>
        getData2: (data: string) => void
      }
      // 子组件
      function Welcome({ onClick2, getData2 }: param) {
        getData2('这是子组件的数据')
        return (
          <>
            <div onClick={onClick2}>Welcome</div>
          </>
        )
      }
      
      // 父组件
      function App() {
        const handleClick = () => {
          console.log(1234)
        }
      
        const getData = (data: string) => {
          console.log(data)
        }
      
        return (
          <>
            <div>Default Template</div>
            <Welcome onClick2={handleClick} getData2={getData} />
          </>
        )
      }
      
      export default App
      

      类似事件，子组件定义的数据，父组件依旧可以获取到

   3. 通过{...}批量传递数据(扩展运算符)

      interface param {
        count: number
        msg: string
        num: number
        id: number
      }
      
      // 子组件
      function Welcome({ count, msg, num, id }: param) {
        return (
          <>
            <div>
              Welcome, {count}, {msg}, {num}, {id}
            </div>
          </>
        )
      }
      
      // 父组件
      function App() {
        const info = {
          count: 123,
          msg: '2456',
          num: 234,
          id: 444,
        }
      
        return (
          <>
            <div>Default Template</div>
            <Welcome {...info} />
          </>
        )
      }
      
      export default App
      

      父组件通过批量传递，子组件可以通过结构接收，也可以通过整体接收