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

2022-09-27 474

版权

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

简介： 【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
    }
  }
复制代码