VueJS：單擊后渲染新組件

Question

我想在 vue.js 中渲染新組件，就好像它是新頁面一樣。

我正在嘗試使用稱為“動態組件”的東西來做到這一點

父級：Post.vue
孩子：Detail.vue

因此，如果單擊其中一個帖子，則帖子關閉，詳細信息打開。

問題是我必須將點擊的帖子的 ID 發送到詳細信息。

這是我的一些代碼。

Post.vue

<template>
  <div>
    <div v-if="loading">
      loading...
    </div>
    <div v-else class="container">
      <ul>
        <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
            <section class="post__main">
              <div @click..?? class="main__title">{{post.title}}</div>
            </section>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
    created() {
      axios.get(this.url, {
        params: {
          page: this.page,
          ord: this.ord,
          category: []
        }
      }).then(res => {
        this.posts = res.data.list;
        this.loading = false;
        this.page++;
      });

細節.vue

<template>
    <div>
        {{contents}}
    </div>
</template>

<script>
import axios from 'axios';
export default {
    name: 'Datail',
    data() {
        return {
            req_no: null,
            contents: {}
        }
    },
    created() {
      axios.get(url, {
        params: {
          req_no: this.req_no
        }
      }).then(res => {
          this.contents = this.res.data
      });
    }
}
</script>

我覺得我可以用props和v-if做到這一點。 有人能幫我嗎？ 謝謝！

Answer 1

單擊帖子后，將帖子 ID 傳遞給單擊處理程序。 在點擊處理程序中，路由到 detail.vue，將 post id 作為路由參數。

如下所示：

  <li v-for="(post, index) in filteredPosts" v-bind:key="post.no">
      <section class="post__main">
          <div @click="onPostClick(post.id)" class="main__title">{{post.title}}</div>
      </section>
  </li>

在您的點擊處理程序中：

 onPostClick(id: number) {
        this.$router.push({
            name: 'details',
            params: {
                id
            }
        });
    }

如果您在應用程序中正確設置了 vue 路由器並有一個有效的詳細路線，這將起作用。

您可以在 details 組件中訪問 post id，如下所示：

created() {
    this.postId = this.$route.params.id;
}

Answer 2

我會看一下<component> ，它接受一個 prop :to並渲染一個組件，這對於標簽之類的東西很有用，您可以在頁面上的相同位置渲染不同的組件，而無需重新加載整個頁面。 見這里： https ://v2.vuejs.org/v2/guide/components-dynamic-async.html 這對您來說似乎是一個非常好的用例，只需將您需要的道具傳遞給component即可。