组件间通信

1、父组件向子组件传数据

react：

import React from "react"
//子组件 类组件
class SonC extends React.Component {
    
  render () {
    
    return (
      //类必须通过this关键字获取，且props是固定的
      <div>类组件接受父组件传来的数据:{
    this.props.msg}</div>
    )
  }
}
//子组件 函数式组件
function SonF (props) {
    
  return (
    <div>函数式组件接受父组件传来的数据：{
    props.msg}</div>
  )
}
//父组件
class App extends React.Component {
    
  state = {
    
    message: 'hello son,快叫爸爸'
  }
  render () {
    
    return (
      <div>
        <SonC msg={
    this.state.message}></SonC>
        <SonF msg={
    this.state.message}></SonF>
      </div>
    )
  }
}

export default App

vue：

<template>
  <div id="app">
    <son-vue :msg="message"></son-vue>
  </div>
</template>
<script>
import SonVue from './Son.vue'
export default {
    
  components: {
    
    SonVue
  },
  data () {
    
    return {
    
      message: 'hello son,快叫爸爸'
    }
  }
}
</script>

<template>
  <div>接受父组件传来的数据:{
    {
     msg }}</div>
</template>
<script>
export default {
    
  props: ['msg']
}
</script>

2、子组件向父组件传数据

react
还没解决好

import React from "react"
//子组件 类组件
class SonC extends React.Component {
    
  state = {
    
    soncount: 0
  }
  add = () => {
    
    this.setState({
    
      soncount: this.state.soncount + 1
    })
    //这里还没解决好值得问题 传过去的值是旧的
     this.props.getSon(this.state.soncount)
  }
  render () {
    
    return (
      <div><p>子组件的count值:{
    this.state.soncount}</p><button onClick={
    this.add}>点击+1</button></div>
    )
  }
}

//父组件
class App extends React.Component {
    
  state = {
    
    dadcount: 0,
  }
  getSonMsg = (sonMsg) => {
    
    console.log(sonMsg)
    this.setState({
    
      dadcount: sonMsg
    })
  }
  render () {
    
    return (
      <div>
        <SonC getSon={
    this.getSonMsg}></SonC>
        <p>父组件dadcount的值是由子组件传来的:{
    this.state.dadcount}</p>
      </div>
    )
  }
}
export default App

vue：

<template>
  <div id="app">
    <Son @getSon="getSonMsg"></Son>
    <p>父组件dadcount的值是由子组件传来的:{
    {
     dadcount }}</p>
  </div>
</template>
<script>
import Son from './Son.vue'
export default {
    
  components: {
    
    Son
  },
  data () {
    
    return {
    
      dadcount: 0
    }
  },
  methods: {
    
    getSonMsg (val) {
    
      this.dadcount = val
    }
  }
}
</script>

<template>
  <div><p>子组件的soncount值:{
    {
    soncount}}</p><button @click="add">点击+1</button></div>
</template>
<script>
export default {
    
  data () {
    
    return {
    
      soncount: 0
    }
  },
  methods: {
    
    add () {
    
      this.soncount++
      this.$emit('getSon', this.soncount)
    }
  }
}
</script>

3、兄弟之间传值

react:

import React from "react"
//子A接收父的数据
function SonA(props){
    
  return(
    <div>this is A 接受到的数据是:{
    props.sendA}</div>
  )
}
//子B传数据给父
function SonB(props){
    
  const bMsg = '这是B的数据'
  return(
    <div>this is B <button onClick={
    ()=>props.getB(bMsg)}>B发送数据</button></div>
  )
}
//父组件
class App extends React.Component {
    
  state = {
    
    sendAMsg : ''
  }
  getBMsg = (msg) =>{
    
    console.log(msg);
    this.setState({
    
      sendAMsg:msg
    })
  }
  render () {
    
    return (
      <div>
        <SonA sendA={
    this.state.sendAMsg}></SonA>
        <SonB getB={
    this.getBMsg}></SonB>
      </div>
    )
  }
}
export default App

4、跨组件通信Context

react：

import React, {
     createContext } from 'react'
const {
     Provider, Consumer } = createContext()
function ComA () {
    
  return (
    <div>comA 套着B:
      <ComB></ComB>
    </div>
  )
}
function ComB () {
    
  return (
    <div>
      这是最后一层comB。
      {
    /* 通过Consumer使用数据 */}
      <Consumer>{
    value => <span> 显示出：{
    value} </span>}</Consumer>
    </div>
  )
}
class App extends React.Component {
    
  state = {
    
    message: 'this is App的state数据'
  }
  render () {
    
    return (
      <div>
        App套着comA:
        <Provider value={
    this.state.message}>
          <ComA></ComA>
        </Provider>
      </div>

    )
  }
}
export default App