vue2 watch监听props 异步传值
时间: 2024-07-12 20:01:05 浏览: 71
Vue 2中的`watch`属性通常用于监听组件数据的变化,但如果你想要监听来自父组件的异步`props`(prop通常是同步传递的),你可以结合`this.$options.propsData`和`setTimeout`或`Promise`来实现。
以下是一个简单的例子:
```javascript
// 在子组件中
export default {
props: ['asyncProp', { // 声明异步prop
type: Function,
default: () => Promise.resolve('default value')
}],
data() {
return {
localValue: null, // 初始化本地值
};
},
mounted() {
this.$watch(
() => this.$options.propsData.asyncProp, // 观察prop的变化
async (newVal) => {
await newVal(); // 如果是函数,调用它获取实际值
this.localValue = newVal; // 保存到本地数据
// 可能还需要处理异步加载后的其他操作
},
{
immediate: true, // 马上执行第一次
deep: false, // 如果props的值结构复杂,可能需要设置为true
}
);
},
}
```
在这个例子中,当`asyncProp`的值从父组件异步加载完成并传递给子组件时,`mounted`钩子会立即触发`watch`的回调,并开始处理新的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)