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

我似乎找不到动态更改组件中变量的方法。我接近这个吗？通常我会使用prop并将prop绑定到vm中的变量，但是因为在这种情况下组件是由路由器动态加载的，这似乎不是一个选项。有没有办法将after-enter事件绑定到组件内的方法？我应该怎么做呢？

感谢您的帮助。

Answer 1

我明白了。解决方案是在我的应用程序中添加一个道具选项，如下所示：

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

HTML：

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

现在我可以使用像正常一样加载到路由器视图中的道具。

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

1 个答案: