パススループロパティは、コンポーネントの内部DOM構造にアクセスするためのAPIです。
各コンポーネントには、使用可能なDOM要素に対応するキーを持つオブジェクトを定義するための特別なptプロパティがあります。各値は、文字列、オブジェクト、または要素に適用する任意のプロパティ（スタイリング、aria、data-*、またはカスタム属性など）を定義する文字列またはオブジェクトを返す関数のいずれかになります。値が文字列または文字列を返す関数の場合、クラス定義とみなされ、要素のclass属性に追加されます。すべてのコンポーネントドキュメントには、PTを介して公開される利用可能なセクション名を文書化するための専用のセクションがあります。
ptの最も一般的な使用法は、スタイリングとカスタマイズです。classおよびstyleプロパティは、配列、オブジェクト、条件付きなどの対応するVueバインディングの正確な構文をサポートしています。以下の例では、PrimeFlex CSSライブラリを使用してPanelコンポーネントをスタイル設定しています。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<Panel header="Header" toggleable
:pt="{
header: (options) => ({
id: 'myPanelHeader',
style: {
'user-select': 'none'
},
class: [
'border-primary',
{
'bg-primary text-primary-contrast': options.state.d_collapsed,
'text-primary bg-primary-contrast': !options.state.d_collapsed
}
]
}),
content: { class: 'border-primary text-lg text-primary-700' },
title: 'text-xl', // OR { class: 'text-xl' }
toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
}">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
宣言的な構文は、プログラムによる構文の代替手段を提供します。ptで始まる属性は、以下の形式に基づいてコンポーネントによって異なる解釈がされます。また、将来の開発者エクスペリエンスを向上させるために、値を自動補完するIDE拡張機能も計画されています。
<ComponentTag pt:[passthrough_key]:[attribute]="value" />
同じオプションに対して両方の構文の代替手段を使用した別の例を次に示します。
<Panel
:pt="{
root: {
class='"border-1 border-solid'
},
header: {
'data-test-id': 'testid',
class: 'bg-blue-500',
onClick: onHeaderClick
}
}"
>
<Panel
pt:root:class="border border-solid"
pt:header:id="headerId"
pt:header:data-test-id="testId"
pt:header:class="bg-blue-500"
:pt:header:onClick="onHeaderClick"
>
コンポーネントのライフサイクルフックは、コールバック関数を登録できるように、hooksプロパティを使用してパススルーとして公開されます。利用可能なコールバックは、onBeforeCreate、onCreated、onBeforeUpdate、onUpdated、onBeforeMount、onMounted、onBeforeUnmount、およびonUnmountedです。ライフサイクルフックの詳細については、Vue.jsのドキュメントを参照してください。
<Panel header="Header" :pt="panelPT">
Content
</Panel>
コンポーネントタイプごとの共有パススループロパティを定義します。たとえば、以下の構成では、すべてのパネルヘッダーにbg-primaryスタイルクラスが設定され、すべてオートコンプリートコンポーネントには固定幅が設定されます。これらの設定は、特定のコンポーネントによって上書きできます。コンポーネントのptプロパティは、グローバルptよりも優先度が高いためです。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
panel: {
header: {
class: 'bg-primary text-primary-contrast'
}
},
autocomplete: {
input: {
root: 'w-64' // OR { class: 'w-64' }
}
}
}
});
globalプロパティには、グローバルpt構成に属するカスタムCSSを定義するためのcssオプションがあります。この機能の一般的なユースケースは、パススループロパティ構成に関連するグローバルスタイルとアニメーションを定義することです。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
global: {
css: `
button {
padding: 2rem;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`
}
}
});
既存のパススルー構成は、usePassThroughユーティリティを使用してカスタマイズされます。最初のパラメータはカスタマイズするオブジェクト、2番目のパラメータはカスタマイズ、最後のパラメータはマージ戦略です。
import { createApp } from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import BasePreset from "./basepreset";
const app = createApp(App);
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
title: {
class: ['leading-none font-light text-2xl']
}
}
},
{
mergeSections: true,
mergeProps: false
}
);
app.use(PrimeVue, { unstyled: true, pt: CustomPreset });
mergeSectionsは、メイン構成のセクションを追加するかどうかを定義し、mergePropsは、定義されたプロパティを上書きするかマージするかを制御します。デフォルトは、mergeSectionsがtrue、mergePropsがfalseです。
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => Tailwind.panel.title.class
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: true, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => Tailwind.panel.title.class
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: true }
);
// Output:
// panel.header.class => [Tailwind.panel.header.class, 'my_panel_header']
// panel.title.class => undefined
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
}
},
{ mergeSections: false, mergeProps: false }
);
// Output:
// panel.header.class => 'my_panel_header'
// panel.title.class => undefined