备忘录 3.Vue2,3以及React父子组件组件传值的方法(1)

1. 简介

        在初次接触组件传值时总是忘了其中的细节,我会在这个文章中简单的写一下在vue2,3中父子组件最常用的传值方式,便于我开发中查阅

2. Vue2中父子组件传值方法

2.1父组件向子组件传值

Father.vue

<template>  
  <div>  
    <child-component :parent-message="parentMessage"/>
  </div>  
</template>  
  
<script>  
import ChildComponent from './components/Son.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: '这是来自父组件的消息',   
    };  
  },  
};  
</script>

Son.vue

<template>
  <div>
    <p>{{ parentMessage }}</p>
  </div>
</template>

<script>
export default {
  props: {
    parentMessage: {
      type: String,
      required: true
    },
  },
  mounted(){
    console.log(this.parentMessage);
  }
};  
</script>

2.2子组件像父组件传值

Father.vue

<template>  
  <div>  
    <h2>父组件</h2>  
    <p>从子组件接收到的数据: {{ messageFromChild }}</p>  
    <child-component @child-event="handleChildEvent"/>
  </div>  
</template>  
  
<script>  
import ChildComponent from './components/Son.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: '这是来自父组件的消息',  
      messageFromChild: ''  
    };  
  },  
  methods: {  
    handleChildEvent(message) {  
      this.messageFromChild = message;  
    }  
  }  
};  
</script>

<template>
  <div>
    <h3>子组件</h3>
    <button @click="sendDataToParent">发送数据给父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
        //自定义事件
      this.$emit('child-event', '这是来自子组件的消息');
    }
  },
};  
</script>

3.Vue3中父子组件传值方法

3.1 父组件向子组件传值

Father.vue

<template>
  <Son :data="data"></Son>
   <!--  :data可变 子组件也相应改变  -->
</template>

<script setup>
  import Son from './components/Son.vue';
  let data = '父=>子'
</script>

Son.vue


<template>
  <p :data="data">{{props.data}}</p>
  <!-- 属性绑定的值需与父组件相同 -->
</template>

<script setup>
//使用defineProps方法接收父组件的值
const props = defineProps({
  data: {
    type: String,
    required: true
  }
})
</script>

3.2 子组件向父组件传值

Father.vue

<template>  
  <Son @handleSizeChange="getSon"/>  
  <!-- 使用子组件的自定义事件 -->
</template>  
  
<script setup>  
import Son from './components/Son.vue';   
  
const getSon = (data) => {    
  console.log('子=>父:', data);  
     
};  
</script>

Son.vue

<template>  
  <button @click="handleSizeChange">子组件传值</button>  
</template>  
  
<script setup>  
import { ref, defineEmits } from 'vue';   
//创建自定义事件
const emit = defineEmits(['handleSizeChange']);  
  
const handleSizeChange = () => {  
  emit('handleSizeChange', data);
  //  data为需要传的数据 
};  
</script>  

4. React父子组件传值

4.1父组件向子组件传值

Father.jsx

import React from 'react';  
import Son from './Son';  
  
const ParentComponent = () => {  
  const messageFromParent ='这是来自父组件的消息' 
  
  return (  
    <div>  
      <ChildComponent fatherData={messageFromParent} />  
    </div>  
  );  
};  
  
export default ParentComponent;

Son.jsx

import React from 'react';  
  
const ChildComponent = (props) => {  
console.log(props.fatherData)
  return (
    <div>  
      <h3>子组件</h3>  
       <p>{props.fatherData}</p>
    </div>  
  );  
};  
  
export default ChildComponent;

4.2子组件向父组件传值

Father.jsx 

import React, { useState } from "react";  
import ChildComponent from "./Son";  
  
const ParentComponent = () => {  
  const [messageFromChild, setMessageFromChild] = useState('');
  const getSon = (data) => {  
    console.log(data); 
    setMessageFromChild(data);
  };  
  
  return (  
    <div>  
      <h2>父组件</h2>  
      <p>子组件发送过来的数据: {messageFromChild}</p>
      <ChildComponent onGetSon={getSon} />  
    </div>  
  );  
};  
  
export default ParentComponent;

Son.jsx

import React from 'react';  
  
const ChildComponent = ({ onGetSon }) => {  
  const handleClick = () => {  
    onGetSon('子=>父');
  };  
  
  return (  
    <div>  
      <button onClick={handleClick}>发送给父组件</button>  
    </div>  
  );  
};  
  
export default ChildComponent;