仅在组件Vue.js上运行一次
仅在组件Vue.js上运行一次
提问于 2019-02-22 18:20:37
我有两个用v-if有条件呈现的组件
<Element v-if="this.mode === 'mode'"/>
<OtherElement v-if="this.mode !== 'mode'"/>我在mounted()下有两个组件的加载动画，我只想在第一次加载它们时运行它们。但是通过挂载，每次当this.mode更改时重新创建组件时，动画就会再次触发。我怎么才能避免这种情况？
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-02-22 18:45:15
可以将组件封装在keep-alive元素中。
<keep-alive>
<Element v-if="this.mode === 'mode'"/>
<OtherElement v-else />
</keep-alive>Stack Overflow用户
发布于 2019-02-22 18:37:34
使用v-if，每次this.mode更改时都重新呈现组件。Vue将它们存储在虚拟DOM中，但是如果使用v-if，则重新呈现它们。
如果您可以访问这些组件的代码，请考虑使用prop for v-show并观看它，这是与emit的可选组合，这样您就可以在父组件和子组件之间进行通信，并在子组件最初加载动画时在子组件和父组件中设置标志，以避免再次加载它。
这将是儿童组成部分之一：
<template>
<div v-show="mode === 'themode'">
</div>
</template>
<script>
export default {
props: {
mode: {
type: Boolean,
required: true,
twoWay: true
},
},
data() {
return {
animationLoaded : false,
}
},
mounted(){
},
watch: {
'mode' : function(){
if(this.mode === 'mode' && this.animationLoaded === false){
//load animation and set flag to true, to avoid loading it again.
this.animationLoaded = true;
this.$root.$emit('component-name:animation-loaded');
}
}
},..。
并将孩子放在父组件中：
<child-component :mode.sync="mode"></child-component>Stack Overflow用户
发布于 2019-02-22 18:30:56
如果created()不执行此工作，则应该尝试在父元素中执行简单检查(如果this.mode在打开或关闭之前被打开或关闭)，将结果保存为变量并将其传递给挂载钩子，并且只在之前没有切换模式的情况下运行动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54832985
复制相关文章
相似问题
腾讯云开发者
