19-子组件根据父组件更新状态而变化

发表于 | 分类于 |

知乎

一. 问题

在Topdev的分页组件的开发的时候，当前页数和总页数是父组件传给分页组件的,即代码中的m_totalPage和m_curPage

1
<Paginationer :totalPage="m_totalPage" :curPage="m_curPage" v-on:getLatestList="onPageClick"></Paginationer>

如果在Paginationer.vue中直接使用curPage,会报如下错误:

1
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

避免在子组件中直接使用父组件传递过来的值，以免修改之后，出现意外情况。简而言之，需要把这个值赋到子组件中,即在Paginationer.vue做如下操作:

1
2
3
4
5
data () {
    return {
      m_curPage: this.curPage
    }
  },

这样就可以解决报错问题，但是会引发另外的问题: 当父组件中m_totalPage和m_curPage发生变化的时候，Paginationer.vue中的值不会跟着变化。

二. 解决办法

在Paginationer.vue中用watch监听curPage这个变量

1
2
3
4
5
6
watch: {
    // 如果 `curPage` 发生改变，这个函数就会运行
    curPage: function (curPage) {
      this.m_curPage = curPage
    }
  },

这样就能使者两个量保持同步。