首页 文章

Vue.js：如何使用带有异步组件的afterEnter挂钩

提问于
浏览 次
0

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

谢谢 .

vue.js vue-router

1 回答

  • 1

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

    所以，你的 resolve 函数应如下所示：

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

相关问题