vue 如何处理两个组件异步问题_vue 组件异步渲染问题

1.要实现的功能

通过ajax请求一段 html 代码 把代码中的 img 标签 替换为 himg

himg 为自定义的vue组件 用来给img添加图片点击放大 并做图片加载失败的处理

2.想法 定义了个异步组件 为 hhtml

components: {

'hhtml': (resolve)=>{

that.getdata().then((a)=>{

resolve ({

components: {

'himg': hImg

},

template: '<div>'+a+'</div>'

})

})

}

}

这里的that为这个组件的父组件

父组件 里有 method getdata 函数为Promise 返回 replace img 标签后的 himg 标签的html

执行发现成功 hhtml成功获取到了数据

3.发现问题

本以为到这里解决了问题 却发现即使 $router.push 和$router.go(-1) 后 组件没有发生变化 没有重新执行 that.getdata() 来获取数据 组件内的值也没发生变化

问 ： 为什么会产生这种原因？ 如何解决？

11月22日

产生原因已经了解了 Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。