下面的示例代码取自vue multiselect(v2(GitHub页面上的JSFiddle，并放入一个html页面中，用于本示例。
如果取消注释v2脚本/链接标记并注释掉v3标记。它运行良好。然而，使用如图所示的v3标签会给出错误"v3"；未捕获类型错误：窗口。VueMultiselect是未定义的"；。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<multiselect
v-model="value"
:options="options"
:close-on-select="false"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true"
placeholder="Pick some"
label="name"
track-by="name"
:preselect-first="true"
id="example"
@select="onSelect"
>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
<!-- WORKS: vue 2 + vue-multiselect 2
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.6/dist/vue-multiselect.min.css">
-->
<!-- DOES NOT WORK: vue 3 + vue-multiselect 3 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue-multiselect@3.0.0-alpha.2"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@3.0.0-alpha.2/dist/vue-multiselect.css">
<script>
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: '',
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP', $isDisabled: true }
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
},
onSelect (option, id) {
console.log(option, id)
}
}
}).$mount('#app')
</script>
</body>
</html>
将组件声明更改为：
components: {
Multiselect: window['vue-multiselect'].default
},