まずはここからVisualforce Componentの基本的な作成

apexでカプセル化されているメソッドなどは再利用ができるようになっています。
VisualforceComponent も同じ考えで、HTMLやVFPageなどを再利用できるような機能です。

VisualforcePageから < c:(Component名) > という感じで呼び出せます。

また、Component側に attribute を持たせて、引数のように
親から値を渡すことができます。

サンプルで、PageからComponentを呼び出し、
テキストとカラーコードを渡して表示させます。

Visualforce Component

Component名 CustomComponentSample としました

<apex:component>
    
    <apex:attribute name="text" description="テキストの内容"
        type="String" required="true" />
    <apex:attribute name="color" description="カラーコード"
        type="String" required="true" />
    
    <div style="border: 1px solid #ccc; padding: 20px;">
            
        <h1>Componentのコンテンツです</h1>
        <h1 style="color:{!color}; ">
            <apex:outputtext value="{!text}" />
        </h1>
    </div>

</apex:component>

Visualforce Page(呼び出し側)

<apex:page>

  <h1>Visualforce</h1>
  <p>ページのコンテンツ</p>

  <c:CustomComponentSample text="最初のコンポーネント" color="#FF0000" />
  <c:CustomComponentSample text="2個目のコンポーネント" color="#00AA00" />
  <c:CustomComponentSample text="3個目のコンポーネント" color="#0000FF" />
  
</apex:page>

実行結果

f:id:MNakayama:20160302191221j:plain

他にもComponentにはクラスを持たせたり色々使いどころがありそうです。
日々精進。ほんならね~。