如何在组件内的元素上触发转换事件？

Question

在vue js应用程序中，当该组件离开时，如何在组件内的元素上触发转换事件？

该元素具有v-if="showElement"，当showElement上的组件转换触发时，leave设置为false，但showElement在视图中未发生变化。

这是一个codepen：https://codepen.io/francoisromain-1472161924/pen/RGPYOb?editors=1111

和代码：

HTML：

<div id="app">
    <a @click="show = !show">Show {{ show }}</a>
    <page-component v-if="show"></page-component>
</div>

<script id="pageComponent" type="x-template">
    <div class="component" transition="component">
        <p>Component</p>
        <div v-if="showElement" class="element" transition="element">
            <p>Element</b>
         </div>
  </div>
</script>

JS：

var pageComponent = Vue.extend({
    template: '#pageComponent',
    data() {
        return {
            showElement: false
        };
    },
    ready() {
        this.showElement = true;
    },
    beforeDestroy() {
        this.showElement = false;
    },
    transitions: {
        'component': {
            enter(el) {
            },
            leave(el) {
                this.showElement = false;
            }
        },
        'element': {
            enter(el) {
            },
            leave(el) {
            }
        }
    }
});

new Vue({
    el: '#app',
    components: {
        pageComponent
    },
    data: {
        show: true
    }
});

Answer 1

您需要使用<p>而不是v-show，因为当移除父组件时，从他处附加的所有内容也会被删除，因此永远不会调用v-if转换。

您的示例已更新：https://codepen.io/anon/pen/PGqxgX

＆＃13;

＆＃13;

element.leave

＆＃13;

var pageComponent = Vue.extend({
   template: '#pageComponent',
   data() {
      return {
         showElement: false
      };
   },
   ready: function () {
     this.showElement = true; 
   },
   transitions: {
      'component': {
         enter(el) {
            this.showElement = true;
         },
         leave(el, done) {
            this.showElement = false;
         }
      }
   }
});

new Vue({
   el: '#app',
   components: {
      pageComponent
   },
   data: {
      show: true
   },
   computed: {
      word: function() {
         return this.show ? 'hide' : 'show'
      }
   }
});

＆＃13;

html {
   font-family: sans-serif;
}

a:hover {
   cursor: pointer;
}

.container {
   margin-top: 0px;
}

.component {
   margin-top: 0;
   opacity: 1;
   transition: all 2s;
}

.component-enter {
   margin-top: -150px;
   opacity: 0;
}

.component-leave {
   margin-top: -150px;
   opacity: 0;
}

.element {
   margin-left: 0;
   transition: all 2s;
   padding: 10px;
}

.element-enter {
   margin-left: 300px;
}

.element-leave {
   margin-left: 300px;
   background: red;
   color: white;
}

＆＃13;

＆＃13;

＆＃13;