특정 전이 이벤트 후 구성 요소 안에 요소를로드하는 방법

Question

프로젝트에 대해 vuejs를 사용하고 있습니다. vue-router로 동적으로로드되는 구성 요소의 템플릿 안에 iframe이 있습니다. 라우터보기에서 전환 효과를 사용하고 있습니다. 잘 작동하지만, iframe이 포함 된 구성 요소를 라우터보기에로드하면 iframe로드가 지연됩니다.

제 아이디어는 전환이 완료된 후 문제가 발생하는 특정 iframe을 갖는 것입니다. 구체적으로는 "after-enter"이벤트입니다. 그러나, 나는 작동 솔루션을 알아낼 수 없습니다. 이 발췌를 참조하십시오

<scroll-content> 
<div class="scrollContentContainer"> 
    <transition name="slide" mode="out-in" v-on:after-enter="afterEnter"> 
    <router-view></router-view> 
    </transition> 
</div> 

<template id="soundComp"> 
... 
<iframe id="musicPlayer" v-if="$data.showPlayer"> 
</template 

나는 내 구성 요소 및 VM 개체에 많은 다른 것들을 시도하고 아무 일 없다. 이것은 내가 시도한 것의 예입니다 :

const soundComp = Vue.component('sound-comp', { 
    template: "#soundComp", 
    data: function() { 
    return { 
     showPlayer: false, 
    } 
    } 
}); 

const app = new Vue({ 
    el: '#app', 
    data: { 
    triangleClass: '', 

    }, 
    methods: { 
    afterEnter: function() { 
     //Change variable in component to true; 
    } 
    } 
)}; 

구성 요소의 변수를 동적으로 변경하는 방법을 찾지 못하는 것 같습니다. 이 문제에 올바르게 접근하고 있습니까? 일반적으로 저는 방금 소품을 사용하고 VM의 변수에 소품을 묶을 것입니다. 그러나이 경우에는 옵션으로 보이지 않는 라우터에 의해 구성 요소가 동적으로로드됩니다. After-Enter 이벤트를 컴포넌트 내부의 메소드에 바인딩하는 방법이 있습니까? 어떻게해야합니까?

도움 주셔서 감사합니다.

Answer 1

나는 그것을 알아 냈다.

const routes = [ 
    {path: '/sound', component: soundComp, props: true}, 
]; 

그리고 HTML :

<router-view v-bind:showplayer="showPlayer"> 

가 지금은 라우터보기에로드 소품을 사용할 수있어 해결책은 간단하게 다음과 같이 내 응용 프로그램에서 라우터에 소품 옵션을 추가했다 정상처럼.