コンポーネントには、propsを使えば値（パラメータ）を渡すことが可能です。
親子間のパラメータ私にも使われていましたよね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <div id="app"> <param-test param="123"></param-test> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> Vue.component('param-test', { props: [ 'param' ], //バリデーションルール props: { param: { type: String, required: true } }, template: '<div>渡された値は{{ param }}です。</div>' }); new Vue({ el: '#app' }); </script> </body> </html> |
propsの注意点
- 子は親から渡ってきたデータを直接書き換えることはできません。
- 配列やオブジェクトを渡す際は参照渡しになるので直接子で書き換えれてしまうので注意。（値や文字列は値渡しだが。）
バリデーションも可能
今回の例で言えば、「param」が受け渡しに利用するパラメータになるのですが、渡す際にバリデーション（入力チェック）をすることが可能です。
| ルール名 | 説明 |
|---|---|
| type | データ型(String、Number、Boolean、Function、Object、Array、Symbol等)を指定できる。 |
| required | プロパティが必須かどうか。 |
| default | 値が指定されなかった場合の規定値 |
| validator | ユーザー自作の検証関数 |
この記事へのコメントはありません。