Монтирование () запускается только один раз для компонента Vue.js - PullRequest
Новая
       4

Монтирование () запускается только один раз для компонента Vue.js

0 голосов
/ 22 февраля 2019

У меня есть два компонента, которые условно отображаются с v-if: 

<Element v-if="this.mode === 'mode'"/>
<OtherElement v-if="this.mode !== 'mode'"/>

У меня есть анимации загрузки для обоих компонентов, которые у меня есть под mounted(), и я хочу запустить только первый раз, когда они загружены.Но при установленном, каждый раз, когда компонент воссоздается при изменении this.mode, анимация срабатывает снова.Как я могу избежать этого?

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

Используя v-if, выполняется повторное рендеринг компонентов при каждом изменении this.mode.Vue сохраняет их в виртуальном DOM, но повторно отображает их, если вы используете v-if.

Если у вас есть доступ к коду для этих компонентов, рассмотрите возможность использования prop для 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>
0 голосов
/ 22 февраля 2019

Вы можете обернуть свои компоненты в элемент keep-alive. 

<keep-alive>
    <Element v-if="this.mode === 'mode'"/>
    <OtherElement v-else />
</keep-alive>
0 голосов
/ 22 февраля 2019

Если созданный () не выполняет работу, вы должны попытаться выполнить простую проверку в родительском элементе, если this.mode ранее был включен и выключен, сохранить результат как переменную и передать его в подключенный хуки запускать анимацию только в том случае, если режим не был переключен ранее.

...