Question

我有一个父对象和一个组件（寻呼机）的Typescript + Vue应用程序：

//pager.ts
@Component({
    name: "pager",
    template: require("text!./pager.html")
})
export default class Pager extends Vue {
    onClick(pageIndex: number) : void{
        this.$emit("pageClick", pageIndex);
    }
}

<!-- pager.html -->
<div id="pager" class="text-center" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <a v-on:click="onClick(1)">
        1
    </a>
</div>

父vue和html文件：

// main.ts
this.vue = new Vue( {
    el: "#log-container",
    components:{
        pager: Pager
    },
    methods: {
        loadFromServer(pageIndex: number) : void
        {
            // do thing
        }
    },
    created(){
        // it workes
        this.loadFromServer(1);
    }
});

<!-- main.html -->
<div id="log-container">
    <pager v-on:page-click="loadFromServer">
    </pager>
</div>

所以问题是我看到事件已成功发出，但主Vue对象没有收到它，并且没有调用loadFromServer方法。

此外：

此方法也在created内调用，并且正确调用
如果我将v-on:page-click="loadFromServer"更改为v-on:page-click="somethingElse"，我会看到方法中的Vue错误.Esese不存在。所以看起来Vue也正确地解析了我的所有东西。

尽管所有这些都没有调用loadFromServer 。

Answer 1

感谢@Bert，正确答案是在事件发生时使用烤肉串。

Vue事件已发出，但未收到

1 个答案: