【Vue3从零开始-实战】S4：组件拆分和使用vue指令精简页面代码

2022-09-27 546

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-实战】S4：组件拆分和使用vue指令精简页面代码

@@DVBVTGC2D7ROIYF4YK_@O.png

前言

实战已经开始了！在前面几篇文章中，我们把首页的布局和样式都完成了，但是将所有内容都写在App.vue里面了。这样就导致App.vue里面的代码很难维护，所以本章将会把App.vue里面的代码全部拆分出来，这样就比较符合Vue框架的风格，也会更加容易维护。

_Z)N@F0%2V()T][(@EUC0TQ.png

根据我们前面写的代码来看，整个首页可以分为三个模块：顶部静态资源、中间店铺列表、底部tabbar。

拆分组件

在views文件夹下面新建一个home文件夹，表示这里面存放首页的组件。

然后在home文件夹下面新建一个Home.vue

H4H6DR)@0PYD5UFS9@_X%95.png

将App.vue中的代码全部放到Home.vue中

将Home.vue当做组件引入到App.vue里面渲染出来

<template>
  <div>
    <Home />
  </div>
</template>
<script>
import Home from './views/home/Home'
export default {
  name: 'App',
  components: {
    Home
  }
}
</script>
<style>
</style>
复制代码

注意：由于Home.vue相对于App.vue有好几层文件夹包裹住的，所以之前引入的css文件，就需要重新确定上层文件了。

@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
复制代码

顶部静态资源

在home文件夹中新建一个StaticPart.vue

BX3E0Y328W5~9EVFS~N]%N8.png

将Home.vue中关于顶部的DOM元素和样式都复制到StaticPart.vue中

然后在Home.vue中引入StaticPart.vue组件

<script>
import StaticPart from './StaticPart'
export default {
  name: 'Home',
  components: {
    StaticPart
  }
}
</script>
复制代码

店铺列表

在home文件中新建一个Nearby.vue

NK1B(PK_S]FZE2~ZYYL1RF3.png

将Home.vue中关于店铺列表的DOM元素和样式都复制到Nearby.vue中

然后在Home.vue中引入Nearby.vue组件

<script>
import StaticPart from './StaticPart'
import Nearby from './Nearby'
export default {
  name: 'Home',
  components: {
    StaticPart,
    Nearby
  }
}
</script>
复制代码

tabbar

tabbar的拆分和上面的组件差不多，所以不在赘述了。

7W)}XEBC@$X~K%SQ)5M_B[R.png

拆分完成

<template>
  <div>
    <div class="wrapper">
      <StaticPart />
      <Nearby />
    </div>
    <Tabbar />
  </div>
</template>
<script>
import StaticPart from './StaticPart'
import Nearby from './Nearby'
import Tabbar from './Tabbar'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  components: {
    StaticPart,
    Nearby,
    Tabbar
  }
}
</script>
<style lang="scss">
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5rem;
  right: 0;
  padding: 0 0.18rem;
  overflow-y: auto;
}
</style>
复制代码

这一块就是拆分完成之后，Home.vue的代码内容了。

这样看起来相比于之前一个页面包含所有代码的时候要精简许多了。

看到首字母大写的标签即表示组件，也方便寻找对应的组件。

拆分出来之后，每个组件大约100行代码左右，维护起来也会更加容易。

使用vue指令精简代码

⭐️ 通过上面的拆分组件之后，其实页面上很多DOM元素其实是重复的，可能只是里面渲染的内容不一样而已，但是标签和样式都是一致的。

🔥 在以前的基础知识章节中，我们学过一些vue指令：v-for、v-if、v-bind、v-html等。下面精简代码的时候就会使用到这些指令。

🎁 在实际项目中，我们获取的数据是从接口端拿到的，相比于我们自定义数据对象会更加精简了。

💥 由于精简代码的过程都差不多，所以下面只是举一个例子，其他的大家可以自行尝试一下。（对应的精简代码会在最后贴出来的）

tabbar

[HNXZVS12506682%ZQQW]`Q.png

精简之前我们需要对元素进行拆解，在稿图中会发现tabbar中主要元素就是icon和title，所以我们就可以在setup函数中定义一个数组，将tabbar上的icon和title都封装成一个对象。

setup () {
    const tabbarList = [
      { icon: '&#xe64f;', title: '首页' },
      { icon: '&#xe61a;', title: '购物车' },
      { icon: '&#xe737;', title: '订单' },
      { icon: '&#xe8a0;', title: '我的' }
    ]
    return {
      tabbarList
    }
}
复制代码

有了数据之后，我们就可以对DOM元素中相同的标签进行循环了。

<div class="tabbar">
  <div class="tabbar__item" v-for="item in tabbarList" :key="item.icon">
    <div class="iconfont">{{item.icon}}</div>
    <div class="tabbar__title">{{item.title}}</div>
  </div>
</div>
复制代码

循环的时候别忘了加上key，key是循环对象中唯一值就行。

5P1T0DG~[F$JB{$I}7ITM3Y.png

❓精简tabbar代码并渲染到浏览器之后会发现，title并没有什么不对，但是icon好像变成了一个字符串，并不是我们想要的icon图标。

⭕️ 这是因为vue的插值表达式会对渲染的数据进行转义，导致出来的效果都是一个字符串。想要解决这个问题，就要用到以前学过的一个指令：v-html

<div class="tabbar">
  <div class="tabbar__item" v-for="item in tabbarList" :key="item.icon">
    <div class="iconfont" v-html="item.icon"></div>
    <div class="tabbar__title">{{item.title}}</div>
  </div>
</div>
复制代码

[L$DI_T1O[W[}QLUND01BL6.png

通过v-html在对数据进行转义之后，页面上就可以渲染出想要的效果了。

精简后的完整代码

⭐️ 下面会对每个拆分出来的组件进行精简，由于内容差不多，所以只将代码贴出来。

Nearby.vue

<template>
  <div>
    <div class="nearby">
      <h3 class="nearby__title">附近店铺</h3>
      <div class="nearby__item" v-for="item in nearbyList" :key="item.id">
        <img :src="item.imgUrl" class="nearby__item__img">
        <div class="nearby__content">
          <div class="nearby__content__title">{{item.title}}</div>
          <div class="nearby__content__tags">
            <span class="nearby__content__tag" v-for="(innerItem, innerIndex) in item.tags" :key="innerIndex">{{innerItem}}</span>
          </div>
          <p class="nearby__content__highlight">{{item.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
复制代码

🔥 这里的DOM元素中使用了一个嵌套的v-for循环指令。

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Nearby',
  setup () {
    const nearbyList = [
      {
        id: 1,
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png',
        title: '沃尔玛',
        tags: [
          '月售1万+',
          '月售1万+',
          '月售1万+'
        ],
        desc: 'VIP尊享满89元减4元运费券（每月3张）'
      },
      {
        id: 2,
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/e9e2929d-f491-489d-8fa5-bd6223e67b06.png',
        title: '沃尔玛',
        tags: [
          '月售1万+',
          '月售1万+',
          '月售1万+'
        ],
        desc: 'VIP尊享满89元减4元运费券（每月3张）'
      }
    ]
    return { nearbyList }
  }
}
</script>
复制代码

StaticPart.vue

<div class="icons">
  <div class="icons__item" v-for="item in iconsList" :key="item.desc">
    <img class="icons__item__img" :src="item.imgUrl" />
    <p class="icons__item__desc">{{item.desc}}</p>
  </div>
</div>
复制代码

setup () {
    const iconsList = [
      {
        imgUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a8a16cef-f2b9-4644-b216-3b95bcb12602/32b200e6-9af9-474d-865b-e11ae4709a68.png',
        desc: '超市便利'
      }
    ]
    return {
      iconsList
    }
  }
复制代码

这里只是精简了顶部静态数据中的N宫格代码，由于静态数据页面里面只有中间的宫格部分需要循环，而且都是一样的数据，所以这里是展示部分代码，具体的可以自己复制实现。

总结

本篇文章主要是将前面几篇布局章节中的代码进行了拆分和精简，让代码更加符合vue的规范，也让后续更加容易维护。

首页的内容至此就完成了，后面会在写其他页面文章时，使用路由、axios还有一些公共组件进行开发。

【Vue3从零开始-实战】S4：组件拆分和使用vue指令精简页面代码

前言

拆分组件

顶部静态资源

店铺列表

tabbar

拆分完成

使用vue指令精简代码

tabbar

精简后的完整代码

Nearby.vue

StaticPart.vue

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-实战】S4：组件拆分和使用vue指令精简页面代码

前言

拆分组件

顶部静态资源

店铺列表

tabbar

拆分完成

使用vue指令精简代码

tabbar

精简后的完整代码

Nearby.vue

StaticPart.vue

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景