Vue js没有渲染自定义组件答案

【问题标题】：Vue js not rendering a custom componentVue js没有渲染自定义组件
【发布时间】：2017-11-07 23:03:19
【问题描述】：

我正在使用这个 - http://monterail.github.io/vue-multiselect/ 使用 vue 和那个库构建单个 js 文件，但其他代码仅在脚本标记中。组件已注册。我放了一些数据，结果是空的

这只是“入门”中的代码，没什么特别的。控制台中没有任何错误，只是空节点。重要的是：我在另一个带有inline-template 的组件中使用它（更新：即使在根目录中也一样）

这就是使用 webpack 创建文件的方式

window.Vue = require('vue');
window.Multiselect = require('vue-multiselect');

然后我只包含编译后的文件并添加脚本

<script>
    Vue.component('multiselect', Multiselect);
    new Vue({
        el: '#vue-app',
        data: {
            options: ['one', 'two'],
            model: ''
        },
        created: function () {},
        computed: {},
        methods: {}
    });
</script>

【问题讨论】：

上下文不足。请显示更多组件的代码
@thanksd 我做到了。
改用Vue.component('multiselect', Multiselect.default)
@thanksd 你是我的英雄！你能把它作为主题的答案吗？

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

'vue-multiselect' 模块的导入方式如下：

import Multiselect from 'vue-multiselect'

通过使用import，您将Multiselect 指定为模块默认导出的值。

但是，因为您使用require，所以您将Multiselect 指定为具有包含组件配置选项的default 属性的模块对象。默认导出未解析，您尝试访问的值位于Multiselect.default。

您应该使用import，或者在定义'multiselect' 组件时访问default 属性：

Vue.component('multiselect', Multiselect.default);

【讨论】：