Vue3 组件 10
Vue3 组件是 Vue3 中的一个基本概念，它是一个可重用的、可维护的代码块，用于构建用户界面。组件可以包含 HTML、CSS 和 JavaScript 代码，用于描述组件的结构和行为。
1. 组件的基本结构
Vue3 组件的基本结构如下：
<template><!-- 组件的模板 -->
</template><script>export default {// 组件的数据和方法}
</script><style>/* 组件的样式 */
</style>
在上面的代码中，<template> 元素用于定义组件的模板，<script> 元素用于定义组件的数据和方法，<style> 元素用于定义组件的样式。
2. 组件的 props
组件可以使用 props 来接收外部数据。props 是组件的输入参数，可以在组件的模板中使用。例如：
<template><div>{{ message }}</div>
</template><script>export default {props: {message: String}}
</script>
在上面的代码中，组件使用 props 接收一个字符串类型的参数 message，并在模板中使用该参数。
3. 组件的 emits
组件可以使用 emits 来发送事件。emits 是组件的输出参数，可以在组件的模板中使用。例如：
<template><button @click="$emit('click')">Click me!</button>
</template><script>export default {emits: ['click']}
</script>
在上面的代码中，组件使用 $emit 方法发送一个 click 事件，并在模板中使用该事件。
4. 组件的 lifecycle
组件有一个生命周期，包括以下几个阶段：
- created：组件被创建时的回调函数
- mounted：组件被挂载到 DOM 中时的回调函数
- updated：组件的数据更新时的回调函数
- destroyed：组件被销毁时的回调函数
例如：
<template><!-- 组件的模板 -->
</template><script>export default {created() {console.log('组件被创建')},mounted() {console.log('组件被挂载')},updated() {console.log('组件的数据更新')},destroyed() {console.log('组件被销毁')}}
</script>
在上面的代码中，组件定义了四个生命周期回调函数，分别在组件被创建、挂载、更新和销毁时被调用。