Vue - 親テンプレート内の複数の場所の1つにコンポーネントをレンダリングする

Question

子コンポーネントを使用するレスポンシブなナビゲーションバーを作成しています。モバイル版とデスクトップ版で異なるコンポーネントを表示する必要があります私はそれを簡単に行う。現在、私は2つの場所に1つの要素を複製し、一度に1つを非表示にしています（ウィンドウのサイズによって異なります）。ユーザーがウィンドウのサイズを変更しない限り問題ありません。ウィンドウがモバイルの幅に縮小されると、デスクトップの幅は消えます）。

編集

+今私は、ナビゲーションバー内の2箇所でコンポーネント（検索フィールド）を表示私は両方（ナビゲーションバーパネル上の）デスクトップバージョンのためにそれを表示する必要があることを見て、そしてモバイル版（ハンバーガーよドロップダウン、これはデスクトップでは表示されません）。ここでは、私が意味することを説明するコードサンプルです。子コンポーネントの名前は検索レコードです（CSSフレームワークはBulmaです）。この考えは、一度に "<検索レコード>"のうちの1つだけを表示することですが、私はこれら2つのコンポーネントを同期させる必要があるため、メディアクエリやv-ifアプローチを使用することはできません。この問題を処理する簡単な方法：

<header class="nav"> 
    <div class="container"> 
     <div class="nav-left"> 
      Logo placeholder 
     </div> 
     <div class="nav-right is-hidden-tablet"> 
      <a class="nav-item is-pulled-right"> 
       <search-records></search-records> 
      </a> 
     </div> 
     <span class="nav-toggle"> 
      <span></span> 
      <span></span> 
      <span></span> 
     </span> 
     <div class="nav-right nav-menu"> 
      <a class="nav-item is-pulled-right is-hidden-mobile"> 
       <search-records></search-records> 
      </a> 
     </div> 
    </div> 
</header> 

Answer 1

この方法をお試しください。テンプレートは次のようになります。

<template> 
    <div class="wrapper"> 
    <div v-if="isMobile" class="desktop-view">Desktop</div> 
    <div v-else class="mobile-view">Mobile</div> 
    </div> 
</template> 

コンポーネントスクリプトは次のようになります。

export default { 
    data() { 
    isMobile: false, 
    }, 

    methods: { 
    onResize() { 
     this.isMobile = window.innerWidth < 720 
    }, 
    }, 

    mounted() { 
    this.onResize() 
    window.addEventListener('resize', this.onResize) 
    }, 

    beforeDestroy() { 
    window.removeEventListener('resize', this.onResize) 
    } 
}