VueJS：点击后渲染新组件答案

【问题标题】：VueJS: render new component after clickVueJS：点击后渲染新组件
【发布时间】：2019-10-03 12:48:07
【问题描述】：

我想在 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++;
      });

Detail.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 做到这一点。有人能帮我吗？谢谢！

【问题讨论】：

'好像是新页面一样。'你可能想看看 vue-router
@Frank 我已经看过了，但由于我必须使用 Ajax 获取数据，它似乎不适用。
这不是问题

标签： javascript vue.js frontend

【解决方案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;
}

【讨论】：

【解决方案2】：

我会看一下<component>，它接受一个道具:to 并呈现一个组件，这对于标签之类的东西很有用，您可以从页面上相同的一般位置呈现不同的组件而无需重新加载整个页面。看这里： https://vuejs.org/v2/guide/components-dynamic-async.html 这对您来说似乎是一个非常好的用例，只需将您需要的道具传递到 component 即可。

【讨论】：