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

【问题标题】：How to load an element inside a component after a specific transition event如何在特定的转换事件后加载组件内的元素
【发布时间】：2017-05-23 01:56:49
【问题描述】：

我在一个项目中使用 vuejs。我在使用 vue-router 动态加载的组件模板中有一个 iframe。我在路由器视图周围使用过渡效果。它工作得很好，但是当我将包含 iframe 的组件加载到路由器视图中时，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

我在组件和 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 事件绑定到组件内的方法？我该怎么做呢？

感谢您的帮助。

【问题讨论】：

标签： javascript iframe vue.js components transition

【解决方案1】：

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

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

还有 HTML：

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

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

【讨论】：

我认为 props=true 甚至如果您以这种方式将属性添加到 router-view 是不必要的。 props=true 旨在将路由参数作为道具传递。 router-view 上的属性将始终作为道具传递。