Question

我想按照here所述使用JS Hook。特别是，我想将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钩子与异步组件一起使用？如果没有，我该怎么做呢？我的目标是在Vue（和/或vue-router）将组件模板注入页面后运行自定义JS，这样我就可以初始化图像滑块等等。重要的是我的自定义JS每次导航组件时都会触发，而不仅仅是在第一次加载时。

谢谢。

Answer 1

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

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

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

Vue.js：如何将asEnter挂钩与异步组件

1 个答案: