DAY05.pdf

Vue.js 的自定义组件是其核心特性之一，允许开发者创建可重用的代码模块，以提高开发效率和代码复用性。在 Vue 项目中，自定义组件通常以 .vue 文件的形式存在，包含模板（template）、脚本（script）和样式（style）三个部分。 创建自定义组件的步骤如下： 1. **设计组件**：你需要确定组件的用途、外观和功能。这可能包括组件的HTML结构、CSS样式以及JavaScript逻辑。 2. **定义组件**：在 `components` 目录下，创建一个新的 .vue 文件，例如 `MyTag.vue`。在这个文件中，你可以按照以下结构编写组件： - `<template>`：定义组件的HTML模板。 - `<script>`：定义组件的JavaScript逻辑，包括数据、方法、计算属性等。这里通常会导出一个默认对象，比如 `export default {}`。 - `<style>`：定义组件的CSS样式，可以是 scoped 或全局样式。 3. **引用和使用组件**：在需要使用组件的父组件中，首先需要导入组件，如 `import MyTag from './components/MyTag.vue'`，然后在 `components` 对象中注册组件，如 `components: { MyTag: MyTag }`。之后，你可以在父组件的模板中使用 `<my-tag></my-tag>` 来插入这个组件。 4. **向子组件传递数据**：在子组件的 `script` 部分，通过 `props` 定义可以接受的父组件传入的参数，例如： ```javascript export default { props: { avatar: { type: String, default: '' }, color: { type: String, default: '' }, name: { type: String, required: true } } } ``` 父组件可以通过属性绑定把这些值传递给子组件，如 `<my-tag :avatar="user.avatar" :color="theme.color" :name="user.name"></my-tag>`。 5. **组件插槽**：插槽允许父组件在子组件内部插入内容。默认插槽无需指定名称，父组件中的内容会被替换到子组件模板中的 `<slot>` 标签位置。如果需要多个插槽，可以使用具名插槽，通过 `name` 属性为插槽命名，如 `<slot name="header"></slot>` 和 `<slot name="footer"></slot>`。父组件通过 `v-slot` 指令指定内容插入到哪个插槽，如： ```html <my-component> <template v-slot:header> <h1>这是头部</h1> </template> <p>这是主要内容</p> <template v-slot:footer> <p>这是底部</p> </template> </my-component> ``` 6. **多页项目开发与 Vue Router**：在大型项目中，Vue.js 通常与 Vue Router 结合使用，实现单页应用（SPA）或多页应用（MPA）。Vue Router 提供了一个强大的路由管理系统，允许页面间的平滑过渡。在多页项目中，每个页面可以视为一个独立的 Vue 应用，通过浏览器的刷新来切换页面。相比传统的超链接跳转，Vue Router 可以实现更复杂的页面间交互，如动画过渡、参数传递等。 在实际开发中，自定义组件和 Vue Router 的结合使用能帮助构建复杂且易于维护的应用。通过组件化，你可以把复杂的UI拆分成可复用的部分，而 Vue Router 则负责管理这些组件的展示逻辑，使得整个应用程序更加模块化和可扩展。