父组件axios获取值之后向子组件传值用了immediate也监听不到变化？

Question

如题所述

Answer 1

在 Vue.js 中，我们可以在父组件中使用 axios 获取数据，并将数据作为 props 传递给子组件。但是，有时候，父组件在获取到数据后立即向子组件传递 props，子组件并不能监听到 props 的变化。这可能是因为子组件在 props 被传递之前已经创建了，此时会导致子组件的 `mounted` 钩子比父组件更新 props 的钩子（如 `updated` 钩子）更早触发，导致子组件无法监听到 props 的变化。

解决这个问题有以下几种方法：

1. 在子组件中使用 `watch` 监听 props 的变化，在声明 props 的时候加上 `immediate: true` 选项，即可在组件创建时立即执行监听回调函数，保证获取到新的值：

```javascript
export default {
props: {
data: {
type: Array,
default: () => [],
immediate: true, // 加上 immediate 选项
},
},
watch: {
data(newValue) {
console.log('props data changed:', newValue);
},
},
};
```

2. 在父组件中使用 `$nextTick` 方法，为子组件 props 变化留出一定时间，以确保子组件被完全渲染后再更新 props：

```javascript
this.$nextTick(() => {
// 如果不加 $nextTick，此时 data 传递给子组件时子组件可能还没完全渲染完
this.$refs.childComponent.setData(data);
})
```

3. 在父组件中也可以使用 `watch` 监听子组件的 mounted 钩子执行完成，再更新 props：

```javascript
watch: {
'$refs.childComponent.$options.name': {
immediate: true,
handler(newVal) {
if (newVal) {
this.$refs.childComponent.setData(this.data);
}
},
},
},
```

上述三种方法均可以解决在父组件 axios 获取值之后向子组件传值时子组件监听不到变化的问题。