Vue js没有渲染自定义组件
Posted
技术标签:
【中文标题】Vue js没有渲染自定义组件【英文标题】:Vue js not rendering a custom component 【发布时间】: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 你是我的英雄!你能把它作为主题的答案吗?
【参考方案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没有渲染自定义组件的主要内容,如果未能解决你的问题,请参考以下文章