Angular React Vue 比较 – 组件篇之Props

关于组件的 Props ，三大框架各有不同的描述。

框架	描述
Angular	输入性属性
React	组件的唯一参数，类似于函数的参数
Vue	不同于html元素本身attribute的自定义属性

三大框架中关于 Props 的描述

在本章中我们将 Props 的焦点聚焦在父子组件上，也就是父组件提供 Props 给它的子组件，从而将一些信息传递给它。

Angular 组件的 Props

在 Angular 中，组件的 Props 被称为输入型属性，它们通常带 @Input() 装饰器。

父组件向子组件传递 prop

要传递到子组件的 prop ，需要将其放在方括号 [] 中，这会将此属性标识为目标属性。

父组件 post-parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-post-parent',
  template: `
    <h2>Props</h2>

    <app-post-child
      [title]="title"
      [description]="description">
    </app-post-child>
  `
})
export class PostParentComponent {
  title = 'Post Title';
  description = 'post description.';
}

子组件 post-child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-post-child',
  template: `
    <h3>{{title}}</h3>
    <p>{{description}}</p>
  `
})
export class PostChildComponent {
  @Input() title = '';
  @Input() description = '';
}

渲染阶段对传入的 prop 值做转换

在上面的代码示例中，如果我们有对标题前后空格过滤的需求，可以在子组件中使用一个输入属性的 setter 来实现。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-post-child',
  template: `
    <h3>{{title}}</h3>
    <p>{{description}}</p>
  `
})
export class PostChildComponent {
  @Input() 
  get title(): string { return this._title; }
  set title(title: string) {
    this._title = (title && title.trim()) || '';
  }
  private _title = '';
  @Input() description = '';
}

React 组件的 Props

在 React 中，它们的作用与函数的参数相同 —— 事实上，props 正是组件的唯一参数！

父组件向子组件传递 prop

父组件 PostParent.js

import {
  useState
} from "react";
import PostChild from "./PostChild";

export default function PostParent() {
  const [title, setTitle] = useState('Post Title');
  const [description, setDescription] = useState('post description.');

  return (
    <PostChild
      title={ title }
      description=
{ description }
    />
  );
}

子组件 PostChild.js

export default function PostChild({ title = '', description = '' }) {
  return (
    <article>
      <h2>{ title }</h2>
      <p>{ description }</p>
    </article>
  );
}

渲染阶段对传入的 prop 值做转换

如果我们需要在 React 中对 prop 的值做转换，请注意不要在 Effect 中来做处理，这样会导致效率低下，我们可以在渲染阶段来处理。

export default function PostChild({ title = '', description = '' }) {
  const newTitle = (title && title.trim()) || '';

  return (
    <article>
      <h3>{ newTitle }</h3>
      <p>{ description }</p>
    </article>
  );
}

Vue 组件的 Props

在 Vue 中，一个组件需要显式声明它所接受的 props，这样它才能知道外部传入的 props 。在使用 <script setup> 的单文件组件中，props 可以使用 defineProps() 宏来声明。

父组件向子组件传递 prop

要传递到子组件的动态 prop ，需要将使用 v-bind 指令绑定，它的特定简写为 : 。

父组件 PostParent.vue

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

const title = ref("Post Title");
const description = ref("post description.");
</script>

<template>
  <PostChild :title="title" :description="description" />
</template>

子组件 PostChild.vue

<script setup>
defineProps({
  title: '',
  description: ''
});
</script>

<template>
  <h3>{{ title }}</h3>
  <p>{{ description }}</p>
</template>

渲染阶段对传入的 prop 值做转换

如果需要对传入的 prop 值做进一步的转换。在这种情况中，最好是基于该 prop 值定义一个计算属性 computed() 。

<script setup>
defineProps({
  title: '',
  description: ''
});

const newTitle = computed(() => props.title.trim());
</script>

<template>
  <h3>{{ newTitle }}</h3>
  <p>{{ description }}</p>
</template>

小结

本章介绍了三大框架组件的 Props ，对组件如何传递 prop 与 渲染阶段 prop 值的转换做了重点说明。三大框架的数据流都是从父组件流单向流入子组件的，不要试图在子组件中修改 prop 。

Angular 中是类组件，实例化的组件可以理解成一个类的对象，对于输入型的属性 prop 我们可以理解为对象中的一个只读属性。

React 函数组件中我们可以把 prop 理解成函数的参数。

Vue 组件中使用的 prop 我们可以把它当成一个宏或声明的全局变量来理解，它只具有只读属性。

文章参考链接：