以slot和prop提升Vue和React组件的灵活性

2023-11-18 20:29:24

Vue.js 中的 slot

在 Vue.js 中，slot 提供了一種靈活的方式來分發內容並管理組件之間的互動。插槽本質上是占位符，允許您將內容插入到組件的指定區域。

構建 Vue.js 插槽

要創建一個插槽，您需要使用 <slot> 標籤。這個標籤可以出現在組件模板中的任何位置，並且可以包含一個 name 屬性來指定插槽的名稱。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot> <!-- 默認插槽 -->
  </div>
</template>

使用 Vue.js 插槽

要使用插槽，您需要在父組件中將內容傳遞給子組件。您可以使用 v-slot 指令或 slot 屬性來實現此目的。

<!-- 使用 v-slot 指令 -->
<MyComponent>
  <template v-slot:header>
    <h1>標題</h1>
  </template>
  <p>內容</p>
</MyComponent>

<!-- 使用 slot 屬性 -->
<MyComponent>
  <h1 slot="header">標題</h1>
  <p slot>內容</p>
</MyComponent>

React.js 中的 prop

在 React.js 中，prop（屬性）是一種將資料從父組件傳遞到子組件的強大機制。prop 可以是任何數據類型，包括基本類型、物件和函式。

構建 React.js prop

要創建一個 prop，您需要在子組件類中定義它。prop 可以使用 ES6 語法或 Class fields 語法來定義。

// ES6 語法
class MyComponent extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.element.isRequired,
  };
}

// Class fields 語法
class MyComponent extends React.Component {
  title = PropTypes.string.isRequired;
  content = PropTypes.element.isRequired;
}

使用 React.js prop

要使用 prop，您需要在父組件中將值傳遞給子組件。您可以使用 JSX 語法將 prop 作為屬性傳遞。

<MyComponent title="標題" content={<p>內容</p>} />

比較 slot 和 prop

slot 和 prop 都是有用的機制，但它們在用途和實現方式上有所不同。

特性	slot	prop
資料流	父組件到子組件	父組件到子組件
資料類型	HTML、組件	任何數據類型
靈活性	高度靈活，允許動態插入內容	較低靈活性，需要預先定義
渲染方式	在組件渲染後渲染	在組件渲染時渲染