vue 手动/局部刷新组件-白红宇

vue 手动/局部刷新组件

阅读量：787 次

发布时间：2019-03-24

本文共 275 字，大约阅读时间需要 1 分钟。

使用场景

当需要在点击按钮或某变量发生变化时，在不刷新整个页面的情况下，局部刷新（重绘）图表或重新加载子组件时，以下方案可以有效实现。

实现方案

在需要局部刷新的组件上，可以通过以下方式实现：

在组件的data选项中，将show的默认值设置为true，以便第一次渲染时组件能够正常显示。

当点击事件发生时，首先将show变量设置为false，随后在this.$nextTick周期中，将show变量设置回true。这样可以在不触发浏览器刷新的情况下，重新渲染目标组件。

完整的范例代码

父组件：

子组件 test1：

转载地址：http://sqmkk.baihongyu.com/

你可能感兴趣的文章

npm install报错，证书验证失败unable to get local issuer certificate

npm install无法生成node_modules的解决方法

npm install的--save和--save-dev使用说明

npm node pm2相关问题

npm run build 失败Compiler server unexpectedly exited with code: null and signal: SIGBUS

npm run build报Cannot find module错误的解决方法

npm run build部署到云服务器中的Nginx（图文配置）

npm run dev 和npm dev、npm run start和npm start、npm run serve和npm serve等的区别

npm run dev 报错PS ‘vite‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

npm scripts 使用指南

npm should be run outside of the node repl, in your normal shell

npm start运行了什么

npm WARN deprecated core-js@2.6.12 core-js@＜3.3 is no longer maintained and not recommended for usa

npm 下载依赖慢的解决方案（亲测有效）

npm 安装依赖过程中报错：Error: Can‘t find Python executable “python“, you can set the PYTHON env variable

npm.taobao.org 淘宝 npm 镜像证书过期？这样解决！

npm上传自己的项目

npm介绍以及常用命令

NPM使用前设置和升级