Vue：父组件通过prop向子组件的传参发生了变化，而子组件的没有接收到新值？增加监听，问题解决。

基本展示：

父页面使用子组件如下：

<child-vue v-if="childShow" ref="childIndex" :father-id="fatherId" ></child-vue>

其中，fatherId为向子页面传的参数。

子页面接收参数如下：

props: ['fatherId'],

子页面使用该参数调用方法（注，使用方式不同，发生的问题不同）

getMore() {
    console.info(this.fatherId)
},

需求：

当fatherId发生变化时，需要同步更新子页面的fatherId，并使子页面的方法能用正确的参数执行。

问题：

当fatherId发生变化时，子页面的fatherId并未更新。

解决方案：

方案一：

子页面不做更改，父页面增加key属性：:key=“参数名”。

<child-vue v-if="childShow" ref="childIndex" :father-id="fatherId" :key="fatherId"></child-vue>

方案二：

父页面不做更改，子页面增加监听事件。

watch: {
    //监听props里父页面传的参数的变化
    fatherId(val) {
        this.fatherId()
    }
},

方案三：

父页面调用子页面方法，修改属性。

父页面代码：

getChildMethod(fatherId) {
    //参数赋值
    this.fatherId= fatherId;
    const _this = this
    //使用nextTick延迟回调
    _this.$nextTick(() => {
        _this.$refs.childIndex.getMore() // 调用子页面方法
   })
},

说明：“childIndex”为父页面中ref的定义名，“getMore”为子页面的方法名

知识点补充：

1，$refs，用于父组件中访问子组件内部的变量或方法。通过$refs，我们可以获取到子组件的实例，并调用它的方法或修改它的属性。

2，this.$nextTick()，用于延迟回调，主要是用在随数据改变而改变的dom应用场景中，vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。

踩坑记录：

1，调用子页面方法时，括号里传了个参数，直接修改了子页面props里的值，导致浏览器报错。错误示范：

getChildMethod(fatherId) {
        this.$refs.childIndex.getMore(fatherId) // 
   },

浏览器报错：

2，调用子页面方法时，没有使用this.$nextTick()延迟回调。导致数据每次点击都先保留一次上次的传参值。