Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions src/guide/migration/filters.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,3 +72,31 @@ badges:
## 移行方法

フィルタを使う代わりに、算出プロパティか関数に置き換えることを推奨します。

### グローバルフィルタ

もし、グローバルにフィルタを登録していて、そしてアプリケーション全体でそのフィルタを使用している場合、そのフィルタを個々のコンポーネントで算出プロパティやメソッドに置き換えるのは不便でしょう。

その代わり、 [globalProperties](../../api/application-config.html#globalproperties) によって、すべてのコンポーネントがグローバルフィルタを利用できるようにすることができます:

```javascript
// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
currencyUSD(value) {
return '$' + value
}
}
```

それから、この `$filters` オブジェクトを使って、次のようにすべてのテンプレートを修正できます:

```html
<template>
<h1>Bank Account Balance</h1>
<p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
```

この方法は、メソッドのみ使用することができ、算出プロパティは使えないことに注意してください。後者は個々のコンポーネントのコンテキストで定義された場合にのみ意味を持ちます。