Vue——初识组件

前言

在官方文档中，对组件的知识点做了一个很全面的说明。本篇博客主要写一个自己的案例讲解。

vue 官方文档 组件基础

页面的构成

说到组件之前，先大致说明下vue中页面的构成要素。

在实际的开发工作中，页面通常采取层层嵌套的树状结构，进行效果的展示。通常的效果如下所示：

对于上面的各个节点上的页面分区，在App.vue中又分为如下几种标签形式。

<header ></header>
<main ></main >
<aside ></aside >

其中各个标签中，采取引入多个组件模板的形式，构成页面的组成。就像使用脚手架新建项目后，默认创建的工程文件结构一样。

何为组件

组件通常而言，就是一个可以公共使用、多次重复使用的代码片段。在Java中一般称为元方法，而在vue中称之为组件。

组件的创建最为重要的三个标准<template>、<script>、<style>，其中<template>属于必须具备的。

编写组件

编写一个页面组件逻辑，本次以页面展示文本作为案例。后续实际开发中可以在其中加入更多优美的样式。

/src/components/MyComponent.vue

<template><div class="cont">{{ message }}</div>
</template>
<script >
export default{data(){return{message:"专注写bug"}}
}
</script>
<!-- style 属性之 scoped，标识后标识该样式只在 MyCompent.vue 组件中才有效 -->
<style scoped>
.cont{color: aquamarine;font-size: 30px;
}
</style>

【注意】此处的 style 标签中，有一个 scoped 标识，表示该样式只在本组件中生效，其他组件中不生效！

组件嵌套注册

组件创建完成后，启动项目，浏览器中此时并不会展示刚新建的组件页面信息。还需要将对应的组件注册至App.vue中，才可以使用。

在之前的各项语法测试博客中，其实已经间接的采用了组件注册的方式。

修改App.vue文件，将新增组件进行注册。组件的注册需要分为以下几步实现。

<template><!-- 第三步  显示组件(推荐) --><MyComponent/><!-- 两种方式都可以，标识的都是同一个组件 --><my-component/>
</template>
<script setup>
// 第一步 引入组件
import MyComponent from './components/MyComponent.vue';
// 第二步 注入组件  如果 script 标签中 标注了 setup ，可以省略此代码
// export default{
//  components:{
//    //MyComponent:MyComponent
//    // key-value 形式，key与value 相同可以缩写为
//    MyComponent
//  }
// }
</script><style></style>

【注意】script 标签上 如果有 setup 标记，则不需要手动进行组件的注入！

效果展示

局部引入和全局引入

模板的引入分为全局引入和局部引入。

在上面的例子中，采取的是局部引入的方式，将MyComponent.vue引入(注入)至App.vue中，实现页面的加载操作。

局部引入的模板，只会在当前vue中生效，如果在别的页面也需要使用时，还需要再次引入。

App.vue

<template><!-- 第三步  显示组件 --><MyComponent/><!-- 两种方式都可以，标识的都是同一个组件 --><my-component/>
</template>
<!-- setup 标记的 script  标签，可以省略手动注入逻辑 -->
<script setup>
// 第一步 引入组件
import MyComponent from './components/MyComponent.vue';
// 第二步 注入组件  如果 script 标签中 标注了 setup ，可以省略此代码
// export default{
//  components:{
//    //MyComponent:MyComponent
//    // key-value 形式，key与value 相同可以缩写为
//    MyComponent
//  }
// }
</script><style></style>

/src/components/MyComponent.vue

<template><h2>局部注入三部曲</h2><br><div class="cont">{{ message }}</div>
</template>
<script >
export default{data(){return{message:"专注写bug"}}
}
</script>
<!-- style 属性之 scoped，标识后标识该样式只在 MyCompent.vue 组件中才有效 -->
<style scoped>
.cont{color: aquamarine;font-size: 30px;
}
</style>

【思考】如何做到整个工程项目引用一次，在其他每个页面想要使用直接拿来用呢？

可以使用全局引用的方式实现！

全局引用

还是上面的/src/components/MyComponent.vue，拷贝并改名成新的文件Headers.vue，如果需要全局引用，则需要修改main.js文件。如下：

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'// 全局注入  一次注入 多个地方直接引用其模板标签
// 第一步  引入组件
import Headers from './components/Headers.vue'const apps = createApp(App);// 第二步  注册  必须在挂载之前进行注册，否则不会生效！
// component(别名称,组件import名)
apps.component("GlobalHeaders",Headers);apps.mount('#app');

将main.js文件修改后，使用component(别名称,组件import名)将对应的模板，进行全局引入并绑定别名称。此时只需要在需要使用的模板中，直接调用即可，如下所示：

App.vue

<template><!-- 全局注册 直接使用main.js中绑定的别名称作为标签名称即可！--><GlobalHeaders/>
</template>

效果如下所示：

全局引入的弊端

• 1、全局引入组件后，即使被注册的组件并未使用，在打包的时候也会进行相应的加载生成文件，导致打包后的项目变大。
• 2、全局引入不能像局部引入那样，更佳清晰地体现出组件与组件的嵌套关系。