首页 文章

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

提问于
浏览 次
1

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

该元素具有 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
    }
});
vue.js

1 回答

  • 3

    您需要使用 v-show 而不是 v-if ，因为当删除父组件时，从他处附加的所有内容也将被删除，因此永远不会调用 element.leave 过渡 .

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

    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'
      }
   }
});

    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;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="app">
   <a @click="show = !show">Click to {{word}} component {{ show }}</a>
   <div class="container">
      <page-component v-show="show">
    </page-component>
   </div>
</div>

<script id="pageComponent" type="x-template">
	<div class="component" transition="component">
      <h1>Component</h1>
      <div v-show="showElement" class="element" transition="element">
      	<p><b>Element</b> {{ showElement }}</p>
         <p>Bug on 'leave': 
    this text should be red. 
    and 'element leave' in the console
    It's not. Why?</p>
     </div>
  </div>
</script>
    回复于

相关问题