Javascript 在vue.js中，为什么这些数据不能正确地从父组件传递到子组件？

我有一个vue组件负责分页，因此每页只显示20个项目。除了我需要从父组件传递下来的一个值，即返回项目总数的“count”值之外，其他一切都正常工作

我使用“计数”值来计算“下一页”按钮是否处于活动状态以及总页数。使用console.log，我可以看到“count”值在父组件中正确返回，但在子分页组件中总是返回为未定义。请告诉我如何解决这个问题

（我不确定在这里使用watch是否正确；我认为它可以解决问题，但它没有改变任何东西。）

编辑：为了更好的上下文，我发布了更多的子组件和父组件

下面是子组件的脚本：

<script>
  export default {
    name: 'Pagination',
    props: ['count'],
    watch: {
      count: function (val, oldVal) {}
    },
    data () {
      return {
        currentPage: 1,
        limit: 20,
        paginationVisible: true,
        firstPageIsCurrent: true,
        prevEllipsisVisible: false,
        pageLink1: 2,
        pageLink1Visible: true,
        pageLink1IsCurrent: false,
        pageLink2: 3,
        pageLink2Visible: true,
        pageLink2IsCurrent: false,
        pageLink3: 4,
        pageLink3Visible: true,
        pageLink3IsCurrent: false,
        nextEllipsisVisible: true,
        lastPageVisible: true,
        lastPageIsCurrent: false,
        prevDisabled: true,
        nextDisabled: false,
        lastPage: 1
      }
    },
    methods: {
      handlePrev () {
        if (!this.prevDisabled) {
          this.currentPage -= 1
          this.paginate()
        }
      },
      handleNext () {
        if ((this.currentPage * this.limit) < this.count) {
          this.currentPage += 1
          this.paginate()
        }
      },
      handleFirstPage () {
        if (this.currentPage !== 1) {
          this.currentPage = 1
          this.paginate()
        }
      },
      handlePageLink1 () {
        if (this.currentPage !== this.pageLink1) {
          this.currentPage = this.pageLink1
          this.paginate()
        }
      },
      handlePageLink2 () {
        if (this.currentPage !== this.pageLink2) {
          this.currentPage = this.pageLink2
          this.paginate()
        }
      },
      handlePageLink3 () {
        if (this.currentPage !== this.pageLink3) {
          this.currentPage = this.pageLink3
          this.paginate()
        }
      },
      handleLastPage () {
        if (this.currentPage < this.lastPage) {
          this.currentPage = this.lastPage
          this.paginate()
        }
      },
      paginateAdjust () {
        console.log(this.count)
        // adjust pagination bar and previous/next buttons
        this.nextDisabled = ((this.currentPage * this.limit) >= this.count)
        this.prevDisabled = (this.currentPage === 1)
        const pageCount = Math.ceil(this.count / this.limit)
        // console.log(pageCount + ', cp: ' + this.currentPage)
        if (pageCount === 1) {
          this.paginationVisible = false
        } else {
          this.paginationVisible = true
          // first page link
          this.firstPageIsCurrent = this.currentPage === 1
          // previous ellipsis
          this.prevEllipsisVisible = this.currentPage > 3 && pageCount > 5
          // first page link
          this.pageLink2Visible = pageCount > 2
          if (this.currentPage < 4) {
            this.pageLink1 = 2
          } else if ((pageCount - this.currentPage) < 3) {
            this.pageLink1 = pageCount - 3
          } else {
            this.pageLink1 = this.currentPage - 1
          }
          this.pageLink1IsCurrent = this.pageLink1 === this.currentPage
          // second page link
          this.pageLink2Visible = pageCount > 3
          if (this.currentPage < 4) {
            this.pageLink2 = 3
           } else if ((pageCount - this.currentPage) < 3) {
            this.pageLink2 = pageCount - 2
          } else {
            this.pageLink2 = this.currentPage
          }
           this.pageLink2IsCurrent = this.pageLink2 === this.currentPage
          // third page link
          this.pageLink3Visible = pageCount > 4
          if (this.currentPage < 4) {
            this.pageLink3 = 4
          } else if ((pageCount - this.currentPage) < 3) {
            this.pageLink3 = pageCount - 1
          } else {
            this.pageLink3 = this.currentPage + 1
          }
          this.pageLink3IsCurrent = this.pageLink3 === this.currentPage
          // next ellipsis
          this.nextEllipsisVisible = ((pageCount - this.currentPage) >= 3) && pageCount > 5
          // last page
          this.lastPage = pageCount
          this.lastPageIsCurrent = this.currentPage === pageCount
        }
      },
      emitMSQ () {
        this.$emit('msq', this.currentPage, this.limit)
      },
      paginate () {
        this.paginateAdjust()
        this.emitMSQ()
      }
    },
    created () {
      this.paginate()
    }
  }
</script>

export default {
  name: 'index',
  components: {Pagination},
  computed: {
    apps () {
      return this.$store.state.apps
    }
  },
  data () {
    return {
      apps: [],
      count: 0,
      searchAddress: ''
    }
  },
  methods: {
    onSearch () {
      if (this.searchAddress.length === 12 || this.searchAddress.length === 0) {
        this.currentPage = 1
        this.makeServerQuery()
      }
    },
    makeServerQuery (cp, pp) {
      let queryStr = '?uid=' + this.$auth.user().id + '&cp=' + cp + '&pp=' + pp
      if (this.searchAddress.length === 12) {
        queryStr += '&se=' + this.searchAddress
      }
      this.$http.get('/apps' + queryStr).then(res => {
        this.apps = res.data.apps
        this.count = res.data.count
        console.log(this.count + ' msq()')
      })
    },

emit、server查询和实际分页元素都可以正常工作。但是“我的下一页”按钮出错，最后一页按钮显示为

NaN

，因为当

count==未定义时，它无法运行正确的计算

提前感谢您的帮助。
从您的评论来看，您似乎没有真正将任何内容传递给组件的道具

正如@Dan所建议的，您的
计数
道具是
未定义的
，因为没有从父级传递到它。要将
count
数据属性从父对象传递给子对象，需要使用模板绑定
或其缩写

这是理解道具的一个很好的起点

这里有一个最小的例子


Vue.config.productionTip=false；
Vue.component（'子'{
模板：`
来自父项：{{count}


下一个
`,
道具：[“计数”]，
计算：{
enableNext（）{
返回this.count&&this.count>0；
}
},
方法：{
onNext（）{
console.log（'转到第页'+this.count+1）
}
}
})
新Vue({
el:“#应用程序”，
模板：`
父计数：{{count}


增量计数
`,
数据：（）=>({
计数：0
})
});
div{边框：实心1px黑色；填充：1em；}
.child{背景：浅灰色；}
按钮：禁用，按钮[禁用]{
边框：1px实心#999999；
背景色：#中交；
颜色：#666666；
}

你能显示你通过
计数
的模板吗？你的
手表
什么也没做，可以删除它。你能展示一下你是如何把你的计数道具从父母传给孩子的吗？此外，如果您能提供一个简单的示例来说明父组件和子组件的外观，这也会有所帮助。@dan count不是直接在模板中使用的，而是在子组件的paginate方法中使用的。@DanielOrmeño I将展示更多的代码。请给我一点时间更新。父模板是我们感兴趣的模板，您必须在那里传递道具，所以这就是我们需要看到的。如果你没有这样做，那就是问题所在。家长必须将道具传递给模板中的孩子。抱歉，如果这是一个愚蠢的问题，Vue对我来说仍然是新的。我仍然需要这样做：从父级：{{count}}在子模板中，即使我没有使用模板中的数据？我所需要的只是子组件中的方法可以访问中的值。没有愚蠢的问题！要使父组件中的数据可访问子组件，需要将其传递到模板上。将其视为组件的
输入。在child中，您将prop声明为输入变量，然后父级需要通过模板将值“传递”到子级
@Brian我添加了一个指向文档的链接，该链接应有助于理解修复它的props。非常感谢。