Дочерний компонент Vue оставить обратный вызов перехода не работает - PullRequest
Новая
       22

Дочерний компонент Vue оставить обратный вызов перехода не работает

0 голосов
/ 26 апреля 2018

Я определил компонент Parent, который имеет компонент Child, оба компонента имеют динамические переходы с обратными вызовами оставления, определенными как outro, проблема в том, что когда компонент Parent уничтожается, его метод outro работает нормальноно метод Child component outro никогда не запускается.Есть ли способ сделать это и сохранить компонент Child для повторного использования и развязки? Демо .

Шаблон приложения: 

<div id="app">
  <parent v-if="showContainer"></parent>
  <button @click="showContainer = !showContainer">
    Toggle Container
  </button>
</div>

Javascript: 

// ISSUE:
// 1. Parent removes child component in its `outro` method
// 2. Child `outro` method never gets called

var Child = {
    template: `
    <transition
        :css="false"
        appear
        @appear="intro"
        @enter="intro"
        @leave="outro"
    >
        <div class="Child"></div>
    </transition>`,
    methods: {
        intro: function (el, done) {
            TweenLite.fromTo(el, 0.5,
                { y: '100%' },
                { y: '0%', delay: 0.5, onComplete: done })
        },
        outro: function (el, done) {
            // 2 <===
            TweenLite.to(el, 0.5,
                { y: '100%', onComplete: done })
        },
    },
}

var Parent = {
    template: `
    <transition
        :css="false"
        appear
        @appear="intro"
        @enter="intro"
        @leave="outro"
    >
        <div class="Parent">
            <div ref="inner" class="Parent__inner"></div>
            <child v-if="showChild"></child>
        </div>
    </transition>`,
    components: {
        Child: Child,
    },
    data() {
        return {
            showChild: true,
        }
    },
    methods: {
        intro: function (el, done) {
            TweenLite.fromTo(this.$refs.inner, 0.5,
                { y: '100%' },
                { y: '0%', delay: 0.25, onComplete: done })
        },
        outro: function (el, done) {
            // 1 <===
            // Setting `showChild` to `false` should remove Child component
            // and trigger its `outro` method ¿?
            this.showChild = false
            TweenLite.to(this.$refs.inner, 0.5,
                { y: '100%', delay: 0.25, onComplete: done })
        },
    },
}

new Vue({
    el: '#app',
    data() {
        return {
            showContainer: true,
        }
    },
    components: {
        Parent: Parent,
    },
})

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

см. Исправлено demo

  1. Использовать директиву v-show.См. Сравнение v-if против f-show 

    <parent v-show="showContainer"></parent>

  2. дочерние элементы нуждаются в самоконтроле и привязке со свойствами

    • добавить v-if="showChild" в <div class="Child"></div>

    • создать props в child

    реквизит: {showChild:{type: Boolean, по умолчанию: true}},

    • переплет props в parent
    <child :showChild="showChild"></child>
0 голосов
/ 26 апреля 2018

Уверен, это невозможно.Даже при использовании CSS-переходов родительский элемент все еще должен контролировать дочерний переход.Нам понадобится пропавшая опора для компонента Transition: p

Возможно, вам не понравится это решение, но в родительском выпуске вы можете позвонить this.$refs.child.outro(this.$refs.child.$el)

...