vue 父组件与子组件传递参数失败问题

原创于 2021-06-17 15:26:55 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

Vue学习专栏收录该内容

5 篇文章

订阅专栏

本文记录了一次从父组件向子组件传递参数时遇到的问题及解决过程。问题表现为子组件无法正确接收父组件传递的topicId参数，最终发现是因为子组件props定义时的拼写错误导致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写博客获取评论模块，需要从父组件向子组件传递topicId，但评论一直不显示
在这里插入图片描述
子组件：

export default {
  name: "CommentView",
  prop: ['topicId'],
  components: { AddComment },
  data() {
    return {
        comments: []
    };
  },
  created() {
    this.fetchComment()
  },
  methods: {
    fetchComment() {
      getComments(this.topicId).then(value => {
              console.log(this.topicId)
              const {data} = value
              this.comments = data
          })
    }
}

父组件中向子组件传值：

 <Comment-view :topicId = "topic.id"></Comment-view>

在父组件和子组件中分别输出传递的参数，父组件显示正常，子组件显示undefined
在这里插入图片描述
问题的解决：
检查了好久发现居然是子组件中prop少加了s!!!
还需要更细心一些，没有了代码报错提示，总是出现不注意的拼写错误