深入 Vue.js 3 组件：构建现代 Web 应用程序的基石

前端

2023-09-05 14:27:06

把握 Vue.js 3 组件精髓

前言

在探索 Vue.js 3 的世界后，我们对它的基础知识有了基本的了解。现在，让我们深入探究组件，了解它们在现代 Web 开发中的至关重要性。

注册组件

踏入组件的世界的第一步是注册组件。在 Vue.js 3 中，可以通过两种方式注册组件：全局注册和局部注册。

全局注册： 在 main.js 文件中使用 Vue.component() 方法全局注册组件，使其可以在应用程序的任何位置使用。
局部注册： 在组件内使用 components 选项局部注册组件，仅限于该组件及其子组件使用。

创建组件

一旦注册了组件，就需要创建组件本身。Vue.js 3 组件是独立且可重用的代码块，用于封装特定的功能或 UI 元素。组件由模板（定义 UI 结构）、脚本（处理逻辑和状态）和样式组成。

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data() {
    return {
      name: "World"
    };
  }
};
</script>

** props 和 events**

props 和 events 是组件之间通信的重要方式。props 用传递数据给子组件，而 events 允许子组件向父组件发出事件。

<parent-component :name="person.name" @greet="greetUser"></parent-component>

<script>
export default {
  methods: {
    greetUser(name) {
      console.log(`Hello, ${name}!`);
    }
  }
};
</script>

插槽

插槽允许组件将其他内容包含在自身内部。这在创建可自定义和灵活的 UI 组件时非常有用。

<my-component>
  <template v-slot:header>
    <h1>My Header</h1>
  </template>
  <template v-slot:footer>
    <p>My Footer</p>
  </template>
</my-component>