Vue js 不渲染自定义组件

Question

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

这只是来自 "Getting started" 的代码，没什么特别的。控制台中没有任何错误，只有空节点。重要的是：我在 inline-template 的另一个组件中使用它（更新：即使在 root 中也是如此）

这就是使用 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>

Answer 1

'vue-multiselect' 模块应该像这样导入：

import Multiselect from 'vue-multiselect'

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

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

中

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

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

Vue js 不渲染自定义组件

Vue js not rendering a custom component

vue.js

vuejs2

vue-component

vuex