Vue与React数据传递

Vue与React数据传递对比

核心数据传递理念

父子组件通信

Vue父子组件通信

<!-- 父组件 -->
<template>
  <child-component 
    :message="parentMessage" 
    @update-message="handleUpdate" 
    v-model:count="count"
  />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('来自父组件的消息');
const count = ref(0);

function handleUpdate(newValue) {
  parentMessage.value = newValue;
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{
  { message }}</p>
    <button @click="updateMessage">修改消息</button>
    <button @click="$emit('update:count', count + 1)">计数+1</button>
  </div>
</template>

<script setup>
defineProps(['message', 'count']);
const emit = defineEmits(['update-message', 'update:count']);

function updateMessage() {
  emit('update-message', '已被子组件更新');
}
</script>

【重点】 Vue支持props向下传递，emit向上传递，以及v-model实现双向绑定。

React父子组件通信

// 父组件
function ParentComponent() {
  const [parentMessage, setParentMessage] = useState('来自父组件的消息');
  const [count, setCount] = useState(0);
  
  const handleUpdate = (newValue) => {
    setParentMessage(newValue);
  };
  
  return (
    <ChildComponent 
      message={parentMessage} 
      onUpdateMessage={handleUpdate}
      count={count}
      setCount={setCount}
    />
  );
}

// 子组件
function ChildComponent({ message, onUpdateMessage, count, setCount }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onUpdateMessage('已被子组件更新')}>
        修改消息
      </button>
      <button onClick={() => setCount(count + 1)}>
        计数+1
      </button>
    </div>
  );
}

【重点】 React严格单向数据流，通过props传递数据和回调函数实现通信。

兄弟组件通信