1. 创建组件
在 Vue 3 中，你可以使用 createApp 和 component 方法来创建组件。例如，创建一个简单的 HelloWorld 组件：
<!-- HelloWorld.vue -->
<template>
<div>
<h1>{{ greeting }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
greeting: 'Hello',
message: 'Welcome to my app!'
};
}
};
</script>
<style>
/* 组件样式 */
h1 {
color: #42b983;
}
</style>
2. 注册组件
在你的主应用文件中，注册并使用该组件：
<!-- main.js -->
import { createApp } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
const app = createApp({
// 主应用配置
});
// 注册 HelloWorld 组件
app.component('HelloWorld', HelloWorld);
// 挂载应用到元素
app.mount('#app');
3. 使用组件
在模板中使用组件：
<!-- App.vue -->
<template>
<div id="app">
<!-- 使用 HelloWorld 组件 -->
<HelloWorld />
</div>
</template>
<script>
// 这里可以添加主应用逻辑
</script>
<style>
/* 主应用样式 */
</style>
这是一个简单的组件的创建、注册和使用的示例。在实际项目中，你可以创建更复杂的组件，包含更多的选项和逻辑。Vue 3 支持功能强大的组件系统，包括插槽、组件通信、生命周期钩子等特性，让你能够构建可维护和可扩展的用户界面。
Vue 3 组件的详细信息可以在[官方文档](https://v3.vuejs.org/guide/component-basics.html)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/12979/Vue3