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

时间:2019-12-04 18:51:51

标签: javascript typescript vue.js vuejs2 vue-component

我正在尝试在全局Vue()初始化中定义一个组件,并且已成功定义了该组件的模板,但是似乎无法定义执行该模板工作的实际类。我正在将Vue与打字稿一起使用。

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
        }
    }
});

1 个答案:

答案 0 :(得分:2)

与其在全局Vue()组件级别上为组件定义模板,不如在'./components/ts/list-club'内定义它:

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

然后将整个组件全部导入并注册到全局Vue()组件:

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

由于模板及其功能已分组在一起,因此维护起来也应该更容易。

更多信息,https://vuejs.org/v2/guide/components-registration.html#Local-Registration