javascript - 推送到组件页面 Vue 时的递归

Question

尝试从我的布局推送到 Post 站点时，我遇到错误“InternalError: too much recursion”。
Layout.vue 代码:

watch(searchText, (newValue, oldValue) => {
  log('Current State of SearchText', newValue);
  if (newValue !== null) {
    if (newValue.value !== undefined) {
      let id = newValue.value;
      // push to post with id
      router.push(`/post/${id}`);
    } else {
      // todo: start search
    }
  }
});

当我的 QSelect 模型值发生变化时，我正在使用 watch 使用react。
我的路线:

{ path: '/post/:id', component: () => import('pages/Post.vue'),

我的帖子页面:

<template>
  <q-page class=""> 
    <Post // I'm getting no error when deleting this Component
      :description="post.description"
      :title="post.title"
      :author="post.user"
      :date="post.date"
      :tags="post.tags"
      :commentArray="post.comments"
    /> 
    <h1>
      Test
    </h1>
  </q-page>
</template>

<script>
import Post from 'src/components/PostComp.vue';
import { useRouter, useGetters, useActions } from '@u3u/vue-hooks';
import { ref } from '@vue/composition-api';
import moment from 'moment';

const debug = require('debug');

const log = debug('app:PostPage');

export default {
  name: 'Post',
  components: {
    Post,
  },
  setup() {
    const { route } = useRouter();
    const post = ref({});

    const getters = {
      ...useGetters('post', ['post']),
    };
    const actions = {
      ...useActions('post', ['findAll']),
    };

      log('params:', route.value.params);

     const p1 = getters.post.value(route.value.params.id);

      post.value = {
        title: p1[0].title,
        user: 'Mary Sullyman',
        description: p1[0].description,
        tags: p1[0].postTags,
        comments: p1[0].commentDTOList,
        date: moment(p1[0].createdDate).format('DD.MM.YYYY HH:mm') + ' Uhr',
      }; 

      log(post);

我正在尝试做的事情:
我的工具栏中有一个 QSelect 来搜索工作正常的帖子。现在，我正在尝试将点击的帖子推送到动态生成的站点。

Answer 1

如果删除 name: 'Post' 会怎样(从导出默认)？您设置的名称与组件标记名称匹配，因此它会陷入无限渲染循环。
见 Recursive Components (仍然适用于 Vue 3，即使它来自 Vue 2 文档)