揭秘 prop 和 attr：前端开发的两个关键属性

2023-10-08 15:28:27

prop 和 attr 的区别

在 HTML 中，prop 是属性，attr 是特性。prop 用于控制元素的内部状态，而 attr 用于元素的外部特征。举个例子，如果我们想创建一个按钮，我们可以使用 prop 来指定按钮的类型，如 <button type="submit">，也可以使用 attr 来指定按钮的样式，如 <button style="background-color: red;">。

prop

用来控制元素的内部状态，比如元素的值、是否选中等。
在 DOM 中可以获取和修改。
可以在 JavaScript 中使用。
可以使用 React、Vue、Angular 等框架进行绑定。

attr

用来元素的外部特征，比如元素的类名、id、title 等。
在 DOM 中只能获取，不能修改。
不能在 JavaScript 中直接使用。
可以在 HTML 中直接使用。

什么时候使用 prop？

当我们需要控制元素的内部状态时，应该使用 prop。比如，当我们需要创建一个复选框，我们可以使用 prop 来指定复选框是否选中。

<input type="checkbox" checked>

什么时候使用 attr？

当我们需要描述元素的外部特征时，应该使用 attr。比如，当我们需要创建一个按钮，我们可以使用 attr 来指定按钮的样式。

<button style="background-color: red;">

prop 和 attr 的技巧

使用 prop 来绑定数据

在 React、Vue、Angular 等框架中，我们可以使用 prop 来将数据从父组件绑定到子组件。这可以使我们的代码更加模块化和可维护。

// 父组件
const Parent = () => {
  const data = { name: 'John Doe' };

  return (
    <Child data={data} />
  );
};

// 子组件
const Child = (props) => {
  const { data } = props;

  return (
    <div>
      <h1>{data.name}</h1>
    </div>
  );
};