以下是一个简单的示例，演示了如何在 Vue 3.0 中创建和使用自定义元素：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3.0 Custom Element</title>
<!-- 引入 Vue 3 的 CDN -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入自定义元素 -->
<script src="./custom-element.js"></script>
</head>
<body>
<!-- 使用自定义元素 -->
<custom-element message="Hello from Custom Element!"></custom-element>
</body>
</html>
// custom-element.js
// 在一个独立的 JavaScript 文件中定义自定义元素
// 注意：Vue 3.0 的版本需要使用 createApp 创建应用程序
const app = Vue.createApp({
data() {
return {
message: ''
};
},
template: '<p>{{ message }}</p>',
props: ['message'],
mounted() {
// 在挂载时设置 message 的值
this.message = this.message || 'Default Message';
}
});
// 注册为自定义元素
app.component('custom-element', {
props: ['message'],
template: '<p>{{ message }}</p>',
mounted() {
// 在挂载时设置 message 的值
this.message = this.message || 'Default Message';
}
});
// 创建应用程序并挂载到指定的元素上
const vm = app.mount('custom-element');
在上述示例中，我们创建了一个包含一个简单数据和模板的 Vue 应用。然后，我们注册了一个名为 custom-element 的 Vue 组件，并将其作为自定义元素使用。在自定义元素的 HTML 标签中，我们可以像使用普通 HTML 元素一样使用它，并传递属性值。
这种方式允许你在非 Vue 的环境中使用 Vue 组件，使得你可以更好地在现有项目中逐步采用 Vue。需要注意的是，Vue 3.0 的自定义元素支持需要使用 createApp 创建应用程序，而不再是直接使用 Vue。
转载请注明出处：http://www.zyzy.cn/article/detail/542/Vue 3.0