javascript - 如何在特定转换事件后加载组件内的元素

Question

我在一个项目中使用 vuejs。我在使用 vue-router 动态加载的组件模板内有一个 iframe。我在路由器 View 周围使用过渡效果。它工作得很好，但是当我将包含 iframe 的组件加载到路由器 View 中时，iframe 的加载滞后于我的转换。

我的想法是在转换完成后加载导致问题的特定 iframe，更具体地说是在“输入后”事件上。但是，我无法找出有效的解决方案。请参阅此摘录:

<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

我在组件和虚拟机对象中尝试了许多不同的方法，但没有任何效果。这是我正在尝试的示例:

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

我似乎找不到动态更改组件中变量的方法。我的做法正确吗？通常我只会使用一个 prop 并将该 prop 绑定(bind)到虚拟机中的一个变量，但在这种情况下，组件是由路由器动态加载的，这似乎不是一个选项。有没有办法将输入后事件绑定(bind)到组件内部的方法？我应该怎样做呢？

感谢您的帮助。

Answer 1

我明白了。解决方案是简单地向我的应用程序中的路由器添加一个 props 选项，如下所示:

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

和 HTML:

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

现在我可以像平常一样使用加载到路由器 View 中的 Prop 。