Vue组件强制刷新

vue

这篇文章是接上篇文章,自己实现markdown编辑器时,碰到的问题 https://www.cnblogs.com/CharmCode/p/13423327.html

我左边输入了内容,右边markdown实施更新

刷新" title="强制刷新">强制刷新组件

Vue官网 key的描述

可以查看Vue官网,关于key的描述

以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:

Vue中的虚拟dom树也是根据key的变化,来判断是否刷新组件,这一点很重要,所以我们就给想要强制刷新的组件加一个key。

然后定义一个方法,专门改变key的值,就可以强制刷新组件,这种改变key的方式效率是最高的。

如下例子

<demo-component :key="demoKey" />

data() {

return {

// 这里随便赋值

demoKey: 0

}

},

method: {

// 改变key重新渲染, 想要重新渲染的时候就调用这个方法

forceRerender() {

this.demoKey ='demo-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')

}

}

以上是 Vue组件强制刷新 的全部内容, 来源链接: utcz.com/z/378674.html

回到顶部