vue.jsのコンポーネントについて質問です

Question

vue.jsでヘッダーのコンポーネントを作りました。
このヘッダーですが、TOP以外は全く同じ作りなのですが、TOPだけロゴが違います。

こういった場合は、TOP用にコンポーネントを新しく作るべきなのでしょうか？
ご教授お願い致します。

Answer 1

設計の方針によってどうすべきかは変わってしまいますので絶対にこうすべきという回答はないのですが、差異がロゴのみということであればpropsを使って条件分岐させるのも手だと思います。

開発が進んでいくことによってトップとその他のヘッダーで機能や見た目が全く異なるものになる場合はコンポーネントが肥大化してしまうため分離するのも良いかと思います。

Comments

[退会済みユーザー]

勉強になります！回答ありがとうございます。

Answer 2

ヘッダ用のコンポーネントにロゴ用のimgタグのsrc属性に渡す値をpropsで渡すようにするってのはどうでしょ？

べきで行くと、どっちでもいいかなぁ。アトミックデザインってやつでいくと、TOP用はPageにしてしまって、その他用はTemplateで量産可能にする感じかなぁ。TOPヘッダコンポまでは今はいらない気がする。

将来的にTOPのヘッダとその他のヘッダで例えば検索窓の有無変わるとかなってから設計変更でもいいと思う。名前忘れたけど、「必要になったらつくりゃいい」みたいな哲学あった気がする。適当でごめん。

Comments

[退会済みユーザー]

回答ありがとうございます！勉強になりました。