前提
Vue.js+AtmicDesignでの設計というか実装方法について教えていただきたいです。
恐らく正解というものはないのかもしれませんが、もしメリットデメリットがあるなら参考にしていきたいです。
AtmicDesignについてのサイトは結構見てきました。
そこでよくある例文に
・Atoms → 入力欄、検索ボタン
・Molecules → 入力欄 + 検索ボタン
・Organisms → 上記Moleculesを含んだヘッダー
というものがあります。
これをこのまま実装していけば、「検索結果を表示するもの」が必要になりますが、それに対する例文が全然ないのです。
悩んでいること
「検索結果を表示するもの」を実装する場合、たぶん「結果欄」というAtomsを作成すると思います。
例として、以下に「入力欄」、「検索ボタン」、「結果欄」という3つのAtomsがあり、それを「検索ボックス」というひとつのMoleculesに入れるとします。
該当のソースコードに簡単に表示します。
・入力欄に値を入力
・検索ボタン押下
・入力値に関する情報を一覧表示
上記の「情報を一覧表示」をする場合、searchRes.vue
のitems
に情報を設定する必要があります。
ここで私が悩んでいること、一般的にどの方法が取られるのかが知りたいです。
<方法1>
・検索ボタン押下後、searchBox.vue
のsearch()
メソッドで入力値の情報を取得。
・取得した情報をsearchRes.vue
のitems
にprops経由で設定。
<方法2>
・検索ボタン押下後、searchBox.vue
のsearch()
メソッドで入力値をstore等に保管か、propsでsearchRes.vue
に渡す。
・searchRes.vue
で入力値を検知し、情報を取得。
・取得した情報を一覧表示。
簡単に言いますと、一覧情報を取得してからsearchRes.vue
に渡すのか、
検索キーをsearchRes.vue
に渡して一覧情報を取得するか、です。
該当のソースコード
js
1// 入力欄:searchInp.vue 2<template> 3 <input type="text" value=""> 4</template>
js
1// 検索ボタン:searchBtn.vue 2<template> 3 <input type="button" value="Search" @click="fnc"> 4</template> 5<script> 6export default { 7 methods: { 8 fnc() { 9 this.$emit('fnc'); 10 } 11 } 12} 13</script>
js
1// 結果欄:searchRes.vue 2<template> 3 <div> 4 <p v-for="(item, idx) in items">{{ item }}</p> 5 </div> 6</template>
js
1// 検索ボックス:searchBox.vue 2<template> 3 <search-inp /> 4 <search-btn @fnc="search"></search-btn> 5 <search-res></search-res> 6</template> 7<script> 8import searchInp from './searchInp'; 9import searchBtn from './searchBtn'; 10import searchBox from './searchBox'; 11export default { 12 methods: { 13 search() { 14 } 15 } 16} 17</script>
考えたこと
方法1では、searchBox.vue
に処理が集まりすぎて肥大化してしまわないのか、
方法2では、searchRes.vue
に機能を持たせるのはよくないのか、とかを考えてどういう設計にすればいいのかどっちつかずの状態です。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/10 06:39