Vue 使用来自 Vue() 的模板和脚本定义组件

Question

I'm trying to define a component in my global Vue() init and have successfully defined the template for the component but cannot seem to define the actual class that is performing the work for the template. I am using Vue with typescript.

import ListClubsComponent from "./components/ts/list-club";

new Vue({
    el: "#app",
    components: {
        "list-clubs": {
            template: require("./components/clubs/list-clubs.html"),
            model: ListClubsComponent // This should be the class for the template
        }
    }
});

Answer 1

Instead of defining the template for your component at the global Vue() component level, try defining it inside of './components/ts/list-club':

var ListClubsComponent = {
    template : ...,
    data:...
    ...
}

Then import and register that entire component altogether at the global Vue() component:

import ListClubsComponent from "./components/ts/list-club";
new Vue({
    ...
    components : {
        'list-clubs' : ListClubsComponent
    }
    ...
})

This should also be easier to maintain since the template is grouped together with its functionality.

More info at https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration