初入 React & Vue 系列：PROPS 之旅，揭秘组件间数据共享的奥秘

前端

2022-11-15 04:46:06

React 和 Vue 中的 PROPS：组件间数据共享的桥梁

在开发复杂的前端应用程序时，界面往往会被划分为多个组件，以提高代码的可复用性和可维护性。然而，组件之间不可避免地需要共享数据，这时 PROPS 就闪亮登场了！它允许父组件将数据传递给子组件，实现组件间的无缝通信。

PROPS 的三大法宝

1. 普通 PROPS： 最常见的类型，可以传递任何类型的数据，包括字符串、数字、布尔值、对象和数组。

2. 展开 PROPS： 当需要传递一组相关数据时，展开 PROPS 可以将对象或数组展开成一组单独的 props。

3. 函数式 PROPS： 允许将函数作为 props 传递，子组件可调用该函数执行操作。

PROPS 的使用技巧

1. 单向数据流： PROPS 遵循单向数据流原则，数据只能从父组件传递给子组件，反向传递是不可能的。

2. 类型检查： 在 TypeScript 或 Flow 等静态类型语言中，可以使用 prop-types 对 PROPS 的类型进行检查，确保数据的准确性。

3. 组件复用： PROPS 使得组件可以轻松复用，你可以用相同的组件实现不同的功能，只需传递不同的 props 即可。

实战演练：用代码说话

React：

import React from 'react';

// 父组件
const ParentComponent = () => {
  const data = { name: 'John', age: 30 };
  return <ChildComponent data={data} />;
};

// 子组件
const ChildComponent = ({ data }) => {
  return (
    <div>
      <p>姓名：{data.name}</p>
      <p>年龄：{data.age}</p>
    </div>
  );
};

Vue：

<template>
  <div>
    <child-component :data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: { name: 'John', age: 30 }
    }
  }
}
</script>

<style>
/* ... */
</style>