現在、laravelとvueで開発を行っているのですが、以下の様に複数ページで共通のコンポーネントを使いまわす際、データはどの様に参照すればいいのでしょうか? 共通コンポーネントがlaravelから受け取るデータは親が違っても同一の配列データです
※vuexは実装していません
大変恐縮ですが、どなたかご回答頂けましたら幸いです
■親コンポーネント-01
<div id="app"> <c-header></c-header> <div class="l-wrap"> <div class="p-content-01"> <div class="p-content-01__inner"> <c-sidebar></c-sidebar> <content-main-01></content-main-01> </div> </div> </div> <c-footer></c-footer> </div>
■親コンポーネント-02
<div id="app"> <c-header></c-header> <div class="l-wrap"> <div class="p-content-02"> <div class="p-content-02__inner"> <c-sidebar></c-sidebar> <content-main-02></content-main-02> </div> </div> </div> <c-footer></c-footer> </div>
■共通コンポーネント
<template> <div class="p-mypage-message__sidebar"> <div class="p-mypage-message__sidebar--navWrap"> <a href="/match/">投稿に戻る</a> <a :class="{ _open: menuFlag }" @click="menuToggle">相手データ</a> </div> <transition name="fade"> <div class="p-mypage-message__sidebar--main u-hide-pc-over" v-show="menuFlag"> <a :class="{ _open: menuFlag }" @click="menuToggle" class="closeBtn u-hide-tab-over"><img src="/img/common/cancel.png" alt=""></a> <a v-bind:href="companyLink" class="p-mypage-message__sidebar--icon"><img v-bind:src="avatarIcon" alt=""></a> <ul> <li v-for="item in companyData"> <dl> <dt>{{ item.title }}</dt> <dd>{{ item.data }}</dd> </dl> </li> </ul> </div> </transition> <div class="p-mypage-message__sidebar--main u-hide-pc-under"> <a v-bind:href="companyLink" class="p-mypage-message__sidebar--icon"><img v-bind:src="avatarIcon" alt=""></a> <ul> <li v-for="item in companyData"> <dl> <dt>{{ item.title }}</dt> <dd>{{ item.data }}</dd> </dl> </li> </ul> </div> </div> </template>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。