Vue项目中组件如何使用

2024-07-11 19:55| 来源: 网络整理| 查看: 265

本章内容为学习vue官方文档中对于组件使用的规范，以及在实际项目中应用组件的经验总结。

阅读链接风格指南 — Vue.js

一、阅读Vue官网总结

①组件名为多个单词

组件名称应该始终是多个单词，尽量以两个单词为最好，根组件App这类除外。

export default { name：'TodoItem' }

*好处：可以避免跟现有的以及未来的HTML元素发生冲突，因为所有的HTML元素名称都是单个单词的。

②避免v-if和v-for用在一起

v-for比v-if具有更高的优先级

场景一、为了过滤列表中的某项（v-if 的条件为v-for遍历后的某项值时）

{{ user.name }} 底层代码执行逻辑如下： this.userList.map(item => { if(item.title) { return item.name } }) 哪怕只想渲染出一小部分元素，也得在每次重新渲染的时候遍历整个列表。在这种情况下，最好的做法是将 userList 替换为计算属性，比如activeUsers，让其返回过滤后的列表 {{ user.name }} computed: { activeUsers() { return this.userList.filter(item => { return item.title }) } } 好处：1、过滤后的列表只会在userList数组发生相关变化时才被重新计算，过滤更高效。 2、使用v-for="user in activeUsers" 之后，在渲染的时候只遍历活跃用户，渲染更高效。 3、解耦渲染层的逻辑，可维护性更强，对逻辑的更改和扩展更强。

场景二、为了避免渲染本应该被隐藏的列表（v-if 的条件不为v-for中的某项）

更好的写法：好处：通过将v-if 移动到容器元素，不会再对列表中的每个元素检查shouldShowUser。取而代之的是，只会检查一次，且不会在shouldShowUser为否的时候运算v-for

③单文件组件文件名的大小写

单文件组件（单文件组件的文件名应该始终是单词大写开头，要么始终是横线连接。）

好的例子： components/ |- MyComponent.vue |- my-component.vue

基础组件名（这些组件为你的应用奠定了一致的基础样式和行为）

好的例子： |- VButton.vue |- VTable.vue |- VIcon.vue

紧密耦合的组件名（和父组件紧密耦合的子组件应该以父组件名作为前缀命名）

实际项目中组件的使用，以后台管理系统中列表为例，主页面为index.vue页面，该页面包含检索框，下方为列表项。列表项操作栏有若干功能按钮。此时，index.vue页面应作为父组件，其他操作每一个功能模块作为子组件进行引入。

如果子组件是需要弹出的dialog框，则将el-dialog封装于子组件中。

【本文地址】

公司简介

联系我们