我是一名 ASL.NET Core 开发人员，我尝试使用 vuejs 来创建一些复杂的表单。为了学习如何使用它，我创建了静态 html 文件，以了解码件在 vuejs 中的工作原理。我有以下示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue 4 Tutorial</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
const app = Vue.createApp({
data: () => ({
example1: {
value: 0,
options: ['Batman', 'Robin', 'Joker']
}
}),
template: `<h2>Hello with Vue CDN</h2>
<vuejs-datepicker></vuejs-datepicker>
<div class="example">
<h3 id="example-1">#1 - Single select</h3>
<div class="output">Data: {{ example1.value }}</div>
<Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
</div>`
});
app.component('Multiselect', VueformMultiselect)
app.mount("#app")
</script>
</body>
</html>
在此示例中，我将 CDN 用于 vuejs 3、vuejs-datepicker 和多选。我使用 app.component('Multiselect', VueformMultiselect) 命令使多选组件正常工作。我能理解，因为我打开了js文件，发现了以下代码
var VueformMultiselect=function(e,t).......
结果是使用 VueformMultiselect 对象添加一个组件。
我检查了 vuejs-datepicker 代码，但找不到类似的东西来在我的应用程序中声明它。有人可以帮我为我的代码声明 vuejs-datepicker 组件吗？
谢谢
最佳答案
您不能使用vuejs-datepicker在Vue3中，你可以尝试使用 vue3datepicker :
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css">
<script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css">
<script>
const app = Vue.createApp({
data: () => ({
example1: {
value: 0,
options: ['Batman', 'Robin', 'Joker'],
},
selDate: null
}),
components: { Datepicker: Vue3DatePicker, Multiselect: VueformMultiselect },
template:
`<h2>Hello with Vue CDN</h2>
<datepicker v-model="selDate"></datepicker>
<div class="output">Data: {{ selDate }}</div>
<div class="example">
<h3 id="example-1">#1 - Single select</h3>
<div class="output">Data: {{ example1.value }}</div>
<Multiselect v-model="example1.value" v-bind="example1"></Multiselect>
</div>`
});
app.mount("#app")
</script>关于javascript - 使用 vuejs3 CDN 在页面中声明外部组件的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71370448/