구성 요소 내부의 요소에서 전환 이벤트를 트리거하는 방법은 무엇입니까?

Question

vue js 앱에서이 구성 요소가 떠날 때 구성 요소 내부의 요소에서 전환 이벤트를 트리거하는 방법은 무엇입니까?

요소에 v-if="showElement"이 있으면 은 구성 요소 전환이 leave ...에서 발생하지만 false로 설정되어 있지만 showElement은보기에서 변경되지 않습니다. 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 : 여기

는 codepen 당신이 대신 v-if의 v-show를 사용할 필요가

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

때 때문에 부모 구성 요소 제거되면 연결된 모든 것이 제거되어 전환이 호출되지 않습니다.

는 귀하의 예는 업데이트 : 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>