Vue.js: 如何在异步组件中使用 afterEnter 钩子

Question

我想按照描述使用 JS Hook here。特别是，我想将 afterEnter 挂钩与异步组件一起使用。

这是我的异步组件：

Vue.component('example', function(resolve, reject){
    let data = {
        text: 'test data',
    };

    $.post('http://example.com', data, function(r){
        r = JSON.parse(r);

        if( r.success ) {
            resolve({
                template: r.data,
                afterEnter: function(el, done){
                    console.log('test');
                }
            });
        }
    });
});

这是 ajax 调用从服务器获取的内容，也是在 r.data 中传递给模板的内容。

<transition v-on:after-enter="afterEnter"></transition>

这是我遇到的两个错误。

[Vue warn]: Property or method "afterEnter" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Vue warn]: Invalid handler for event "after-enter": got undefined

异步组件可以使用JS hooks吗？如果没有，我应该如何处理这个问题？我的 objective 是在 Vue (and/or vue-router) 将组件模板注入页面后运行自定义 JS，这样我就可以初始化图像滑块等等。重要的是，我的自定义 JS 在每次导航到组件时都会触发，而不仅仅是在第一次加载时触发。

谢谢。

Answer 1

该警告意味着 Vue 正在寻找（但无法找到）您在模板中引用的属性或名为 "afterEnter" 的方法。你已经在你的 resolve 函数中定义了 afterEnter 就好像它是一个生命周期钩子一样，但它需要是你的 Vue 实例的方法之一。

因此，您的 resolve 函数应如下所示：

resolve({
  template: r.data,
  methods: {
    afterEnter: function(el, done) {
      console.log('test');
    }
  }
});

Vue.js: 如何在异步组件中使用 afterEnter 钩子

Vue.js: how to use the afterEnter hook with an async component

vue.js

vue-router