心理罪第二季下载,安犬漏洞扫描,电陶炉怎么样
vue
通过直接强制刷新 dom 来达到重置组件的效果,这样可以重置一些组件的动画以及组件内初始的数据
强制重新生成 dom 的实现
原理:强制重新生成 dom 可以通过 vue 中的 key 来实现。在 vue 更新 dom 时,如果 key 值相同则会对原有组件进行复用,如果不同,则会重新生成。
代码示例:
每次点击 refresh 按钮,demo 组件都会重新生成
组件:
/** * demo.vue */ <template> <div>demo</div> </template> <script> export default { data () { return {} }, created: function () { console.log('created') } } </script>
主页面:
/** * index.vue */ <template> <div> <demo :key="id"></demo> <button @click="refresh">refresh</button> </div> </template> <script> import demo from './demo' export default { data () { return { id: +new date() } }, methods: { refresh: function () { this.id = +new date() } }, components: { demo } } </script>
注:
对 +new date() 的说明:
4 个结果一样,都是返回当前时间的毫秒数
alert(+new date())
alert(+new date)
var a=new date()
alert(a.valueof())
alert(a.gettime())
补充:vue强制刷新组件
把一个组件重置到初始状态是一个常见的需求,推荐的做法有两种,一种是父组件重置子组件的 prop,另一种是子组件暴露一个重置的方法供父组件调用。但有些时候,子组件既没有提供重置的方法,也没提供 prop 来重置自己的状态。更重要的是,这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下:
<component v-if="hackreset"></component> this.hackreset = false this.$nexttick(() => { this.hackreset = true })
v-if 在切换时,元素及它的绑定数据和组件都会被销毁并重建
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论