Vueを使用して他のコンポーネントからコンポーネントのコンテンツを挿入

Question

私は自分のニーズに合わせて変更する通常の管理ダッシュボード（Core-UI）を持っています。私はMonitorAside.vueをロードするために「脇に」コンポーネントを持っています（を使用しています）

ここでは小さなランダウンです。

src/containers/Full.vueは、すべての主要コンポーネント（脇を含む）をインポートし、router-viewを使用してルートに基づいてビューをレンダリングします。

src/components/Aside.vueが問題のコンポーネントです。それには固定コンテンツが含まれていますが、他のコンポーネントがそうする必要がある場合は、そのコンテンツを動的に変更します。

src/views/Monitor.vueは、このページであり、したがって、動的にasideコンポーネントの内容を挿入/スワップする必要があるページです。 このコンポーネントはFull.vueにインポートされませんが、そこにあるルータを通してレンダリングされます。

src/views/asides/MonitorAside.vueは、MonitorページにアクセスするたびにAside.vueにロードしたいコンポーネントです。

どうすればいいですか？

Answer 1

したがって、vue-routerが別のページに移動するときは、Asideコンポーネントの内容を変更しますか？ $routeの値を見て、ルート名に応じて次のようなコンテンツを表示できます。

<template> 
<div> 
    <monitor-aside v-if="page === 'monitor'"></monitor-aside> 
    <div v-else> 
     <!-- your default aside content --> 
    </div> 
</div> 
</template> 

<script> 
import MonitorAside from '../views/asides/MonitorAside.vue' 
export default { 
    data() { 
     return { 
      page: null 
     } 
    }, 
    methods: { 
     setContent(routeName) { 
      if (routeName === 'Monitor') { 
       this.page = 'monitor'; 
      } else { 
       this.page = null; 
      } 
     } 
    }, 
    created() { 
     this.setContent(this.$route.name); 
    }, 
    watch: { 
     '$route'(to, from) { 
      this.setContent(to.name); 
     } 
    } 
    components: { 
     MonitorAside 
    } 
} 
</script>