關(guān)于組件的 Props ，三大框架各有不同的描述。

在本章中我們將 Props 的焦點(diǎn)聚焦在父子組件上，也就是父組件提供 Props 給它的子組件，從而將一些信息傳遞給它。

Angular 組件的 Props

在 Angular 中，組件的 Props 被稱為輸入型屬性，它們通常帶 @Input() 裝飾器。

父組件向子組件傳遞 prop

要傳遞到子組件的 prop ，需要將其放在方括號(hào) [] 中，這會(huì)將此屬性標(biāo)識(shí)為目標(biāo)屬性。

父組件 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 = '';
}

渲染階段對(duì)傳入的 prop 值做轉(zhuǎn)換

在上面的代碼示例中，如果我們有對(duì)標(biāo)題前后空格過濾的需求，可以在子組件中使用一個(gè)輸入屬性的 setter 來實(shí)現(xiàn)。

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 中，它們的作用與函數(shù)的參數(shù)相同 —— 事實(shí)上，props 正是組件的唯一參數(shù)！

父組件向子組件傳遞 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>
  );
}

渲染階段對(duì)傳入的 prop 值做轉(zhuǎn)換

如果我們需要在 React 中對(duì) prop 的值做轉(zhuǎn)換，請(qǐng)注意不要在 Effect 中來做處理，這樣會(huì)導(dǎo)致效率低下，我們可以在渲染階段來處理。

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

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

Vue 組件的 Props

在 Vue 中，一個(gè)組件需要顯式聲明它所接受的 props，這樣它才能知道外部傳入的 props 。在使用 <script setup> 的單文件組件中，props 可以使用 defineProps() 宏來聲明。

父組件向子組件傳遞 prop

要傳遞到子組件的動(dòng)態(tài) prop ，需要將使用 v-bind 指令綁定，它的特定簡(jiǎn)寫為 : 。
父組件 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>

渲染階段對(duì)傳入的 prop 值做轉(zhuǎn)換

如果需要對(duì)傳入的 prop 值做進(jìn)一步的轉(zhuǎn)換。在這種情況中，最好是基于該 prop 值定義一個(gè)計(jì)算屬性 computed() 。

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

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

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

小結(jié)

本章介紹了三大框架組件的 Props ，對(duì)組件如何傳遞 prop 與 渲染階段 prop 值的轉(zhuǎn)換做了重點(diǎn)說明。三大框架的數(shù)據(jù)流都是從父組件流單向流入子組件的，不要試圖在子組件中修改 prop 。

Angular 中是類組件，實(shí)例化的組件可以理解成一個(gè)類的對(duì)象，對(duì)于輸入型的屬性 prop 我們可以理解為對(duì)象中的一個(gè)只讀屬性。

React 函數(shù)組件中我們可以把 prop 理解成函數(shù)的參數(shù)。

Vue 組件中使用的 prop 我們可以把它當(dāng)成一個(gè)宏或聲明的全局變量來理解，它只具有只讀屬性。

文章參考鏈接：

• https://angular.cn/guide/component-interaction
• https://angular.cn/guide/property-binding
• https://zh-hans.react.dev/learn/passing-props-to-a-component
• https://zh-hans.react.dev/learn/you-might-not-need-an-effect
• https://cn.vuejs.org/guide/components/props.html
• https://cn.vuejs.org/guide/essentials/template-syntax.html#attribute-bindings