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>

在上面的代码中，组件定义了四个生命周期回调函数，分别在组件被创建、挂载、更新和销毁时被调用。