Vue子组件离开转换回​​调不起作用

Question

我定义了一个Parent组件，其中Child组件，两个组件都有动态转换，并将回调定义为outro，问题是当Parent组件获得时销毁其outro方法工作正常，但其Child组件outro方法永远不会被解雇。反正有没有完成这个并保持Child组件可重用和解耦？ Demo

应用模板：

<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,
    },
})

Answer 1

很确定这种方式不可能。 即使使用CSS过渡，父母仍然需要控制孩子的过渡。 我们需要一个关于Transition组件的消失道具：p

也许你不会喜欢这个解决方案但是，在父母的outro中，你可以打电话给this.$refs.child.outro(this.$refs.child.$el)

Answer 2

请参阅更正的demo

1. 使用v-show指令。请参阅比较v-if vs 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>