# 今回はcomposition APIでタブ機能を作った。親でコンテンツをいくつ入れるかできるので子コンポーネントは使い回しが出来て便利だと思う。 ### 子コンポーネントまずはタブの数分、繰り返し表示したいので`v-for`を使い、クリックされたタブのidと内容（text）を取得するために`v-on:click`を設定しタブナンバーの中身を引数に渡す。クリックされたクラスを`isActive`を付与したいので`===タブ.id` *liタグの中身.numberは別になんでもいいタブで押された内容を下のタブに表示するため、isActiveで判断しデフォルト（最初に表示する文）とそれ以外を入れるために`v-else`を設定する。 ```html ``` 次に、jsの設定。 ○○○の部分は親コンポーネントから設定するのでprops クリック関数でpropsで渡ってきた○○○を△△△に分け、idとtextを引数に渡し、クリックされたタブのid（numberでもいい）をisActiveに代入し、isTextの中身も代入するクリックされる前（最初の表示）でisActiveの初期値などを設定する ```js ``` ### 親コンポーネント importで読み込み、タグを入れる（省略）タブの中身や個数をオブジェクトに設定する ```html js ``` ## 完成系 ```html js //子コンポーネント ``` ```html js // 親コンポーネント

実績作成【Reactの中級】(Techpit)2巡目

Typescript,CSS in JS(Emotion)