如何在組件內的元素上觸發轉換事件？

Question

在vue js應用中，如何在組件內部的元素上觸發一個轉換事件，當這個組件離開時？

元素有一個v-if="showElement"，然後當leave觸發組件轉換時showElement被設置爲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

您需要使用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"> 
 
\t <div class="component" transition="component"> 
 
     <h1>Component</h1> 
 
     <div v-show="showElement" class="element" transition="element"> 
 
     \t <p><b>Element</b> {{ showElement }}</p> 
 
     <p>Bug on 'leave': <br />this text should be red. <br />and 'element leave' in the console<br />It's not. Why?</p> 
 
    </div> 
 
    </div> 
 
</script>