代码之家 › 专栏 › 技术社区 › Adrian Guerrero

Vue子组件离开转换回调不工作

gsap vuejs2 vue.js javascript

Adrian Guerrero · 技术社区 · 6 年前

我定义了 Parent 具有 Child 组件,这两个组件都具有动态转换,并将休假回调定义为 outro ,问题是 父母亲 组件被销毁 奥特罗 该方法运行良好,但其 小孩 组成部分 奥特罗 方法永远不会被激发。是否有办法做到这一点并保持 小孩 组件可重用和解耦? 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,
    },
})

2 回复 | 直到 6 年前

Volodymyr Symonenko 6 年前

请参见更正的 demo

使用 v-show 指令。请参见比较 v-if vs f-show
```
<parent v-show="showContainer"></parent>
```
子元素需要自控制器并与属性绑定
- 添加 v-if="showChild" 在里面 <div class="Child"></div>
- 创造 props 在里面 child
道具:{ showChild:{ 类型:布尔, 默认值:true } },
- 结合 道具 在里面 parent
```
<child :showChild="showChild"></child>
```

Renaud 6 年前

很确定这样是不可能的。即使在使用CSS转换时,父级仍然需要控制子级的转换。我们需要一个过渡组件上的消失道具:p

也许你不会喜欢这个解决方案,但在家长的办公室,你可以打电话 this.$refs.child.outro(this.$refs.child.$el)