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>

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