互相传值

1、react18.3 互相传值

• 2-1、父组件的值传给子组件
  1. Father.tsx

 import { useState } from 'react'
   import Son from './Son'
   
   export default function Father() {
       const [param, setParam] = useState('initial value')
       const handlePutApply = () => {
           setParam('xiugai')
       }
       return (
           <>
               father
               {param}
               <button onClick={handlePutApply} >father</button>
               <Son param={param}/>
           </>
   
       )
   }

Son.tsx

 export default function Son({ param }) {
   return (
     <>
       <div>
         Son获得父组件的值={param}
       </div>
     </>
   )
 }

• 2-2、子组件的值传给父组件

1. Father.tsx

   import Son from './Son'
   
   export default function Father() {
   const handleMessageFromChild = (message) => {
   console.log(message)
   }
   return (
   <>
   father
   <Son sendMessage={handleMessageFromChild} />
   </>
   
   )
   }

2. Son.tsx

   export default function Son({ sendMessage }) {
   const handleClick = () => {
   sendMessage('Hello from Child!') // 调用父组件的函数并传递消息
   }
   return (
   <>
   <div>
   <button onClick={handleClick}>发送消息给父组件</button>
   </div>
   </>
   )
   }

2、小程序 互相传值

• 2-1、父组件的值传给子组件

 <custom-checkbox proCheck="{{ischeck}}">

  properties: {
    proCheck:{
        type:Boolean,
        value:false
    }
},
  attached() {
    this.setData({
      checked:this.properties.proCheck
    })
  },

• 2-2、子组件的值传给父组件
  1. Father

        <text>Father</text>
        <Son  bind:proEvent="getSonData"/>

        Component({
        methods: {
          getSonData(event){
            console.log(event.detail)//获取子组件的值
          },
         }
        })

  2. Son

        <text>Son</text>
        <button bindtap="sendData">给父类数据</button>

        Component({
        methods: {
        sendData(){
        this.triggerEvent('proEvent','传给父组件')
        },
        }
        })

3、vue3.5 互相传值

• 2-1、父组件的值传给子组件

1. Father.vue

   <script setup lang="ts">
   import { ref } from 'vue'
   import Son from './Son.vue'
   
   const count = ref(0)
   function changs() {
     count.value++
   }
   </script>
   
   <template>
     <div>
       Father{{count}}
       <button @click="changs">Father</button>
       <Son :count="count"/>
     </div>
   </template>
   
   <style scoped>
   
   </style>

2. Son.vue

    <script setup lang="ts">
     import { defineProps } from 'vue'
     const prost = defineProps({
       count: Number
     })
   </script>
   <template>
     <div>Son获取父组件的值={{prost.count}}</div>
   </template>
   
   <style scoped>
   
   </style>

• 2-2、子组件的值传给父组件

1. Father.vue

 <script setup lang="ts">
   import Son from './Son.vue'
 
   function callBackFun(e) {
     console.log(e)
   }
 </script>
 
 <template>
   <div>
     Father{{count}}
     <button @click="changs">Father</button>
     <Son @callBack="callBackFun"/>
   </div>
 </template>

1.Son.vue

  <script setup lang="ts">
    import { defineEmits, ref } from 'vue'
  
    const sonValue = ref('给父组件的值')
    const emit = defineEmits(['callBack'])
    function tickCallBack() {
      emit('callBack', sonValue.value)
    }
  </script>
  <template>
    <div>
      <button  @click="tickCallBack">把值传给父组件</button>
    </div>
  </template>
  
  <style scoped>
  
  </style>