Vue-cli3.0布局实战篇---组件

前言

本文所采用技术栈：vue3+vue-router4+vuex4+vant3，在我们实际开发项目中，会有一些重复的代码块，比如单页应用的底部工具栏，页面的顶部导航栏，甚至一些特定应用里的推荐商品等等，如果我们每个页面都单独去写这些代码，一是影响开发效率二是不方便维护。而vue中的组件components，就可以解决这样的问题，通过组件的复用，来实现这些相同的页面效果。今天就给大家带来，在vue-cli3.0开发中，几种最常见的组件使用方法。

1、灰色背景的组件，使用场景：

1.1 编写组件代码：在项目根目录\src\components文件夹下新增background.vue，里边写入以下代码

<template>
<div class="bg" :style="{height: height}"></div>
</template>

<script>
export default {
  name: "background",
  props: {
    height: String
  }
}
</script>

<style scoped>
.bg{
  background-color: #f4f4f4;
}
</style>

以上代码声明了一个名字为background的组件，组件通过height来改变灰色背景的高度。

1.2 在vue文件中使用组件

<script>
import background from "../components/background";
export default {
  name: "member",
  components: {
    background,
  },
  setup(){
    
  }
}
</script>
<template>
<div class="member-box">
<background height="10px"></background>
</div>
</template>

先通过import把组件引入进来，然后在components里加上该组件，最后在模板文件里使用组件。

2 顶部导航栏，使用场景如下：

2.1 编写组件代码，在项目根目录\src\components文件夹下新增Navbar.vue，写入以下代码

<template>
  <div>
<van-nav-bar
      :title="headName"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
  />
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar } from 'vant'
export default {
  name: "Navbar",
  components: {
    [NavBar.name]: NavBar
  },
  props: {
    headName: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    }
  },
  emits: ['dosomething'],
  setup(props, context) {
    const router = useRouter()
    onMounted(() => {
    })
    const onClickLeft = () => {
      if(props.url != '') {
        router.replace({ path: props.url });
      }else {
        router.go(-1);
      }
      context.emit('dosomething');
    }
    return {
      onClickLeft,
    }
  }
}
</script>

<style scoped>
</style>

这里，我们使用了vant的顶部导航栏组件，组件里定义了headName和url，来控制导航栏标题和跳转的路径，又通过自定义事件dosomething，来控制点击后的操作。

2.2 在vue文件中使用Navbar组件

<script>
import Navbar from "../components/Navbar";
export default {
  name: "gooddetail",
  components: {
    Navbar
  },
  setup(){
    const dsm = () => {
      console.log('dsm')
    }
    return {
      dsm
    }
  }
}
</script>
<template>
  <Navbar headName="商品详情" url="/live" @dosomething="dsm"></Navbar>
</template>

这里如果我们要点击返回上一页，直接把url取消掉或者url=""即可。

3 精选推荐组件，使用场景如下：

3.1 编写组件代码，在项目根目录\src\components文件夹下新增GoodListCpt.vue，写入以下代码

<template>
  <div class="list-box">
    <div class="good-box" v-for="(item, index) in data" :key="item.id" @click="goDetail(item.id)">
      <div>
        <img :src="domain+item.image"/>
      </div>
      <div class="info-box pd10">
        <p>{{item.name}}</p>
        <p class="col-gray fs-12 pd-10-0">{{ item.policy }}</p>
        <p>
          <span class="col-red">¥</span>
          <span class="col-red fs-16">{{ item.price }}</span>
          <span class="fs-12 col-gray">已售{{ item.sale }}件</span>
          <img src="../assets/images/8.png"/>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: "GoodCpt",
  components:{
  },
  props: {
    data: Array
  },
  setup() {
    const domain=process.env.VUE_APP_a;
    const router = useRouter()
    const goDetail = (id) => {
      router.push(`/gooddetail/${id}`);
    }
    return {
      goDetail,
      domain
    }
  }
}
</script>

<style scoped>
.list-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #ffffff;
}
.good-box{
  width: 49.5%;
}
.info-box p:first-child{
  height: 20px;
  overflow: hidden;
  word-break: break-all;
}
.info-box p{
  text-align: left;
}
.info-box img{
  float: right;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.banner-box img{
  width: 100%;
}
</style>

这里我们声明组件名称为GoodCpt，定义了data用来接收数据。

3.2 使用GoodCpt组件

<script>
import { onMounted, reactive, toRefs } from 'vue'
import {List} from 'vant'
import GoodCpt from "../components/GoodListCpt"
import {recommend} from "../api/index"
export default {
  name: "member",
  components: {
    GoodCpt,
    [List.name]: List,
  },
  setup() {
    const state = reactive({
      goodItems: [
      ],
      loading: false,
      finished: false,
      page:1,
      limit:4
    })
    const onLoad = () => {
      recommend({page:state.page,limit:state.limit}).then((res)=>{
        // 加载状态结束
        state.loading = false;
        if(res.code==1){
          state.goodItems=state.goodItems.concat(res.data);
          state.page++;
        }else{
          state.finished=true;
        }
      })
    }
    return {
      ...toRefs(state),
      onLoad
    }
  }
}
</script>
<template>
<div class="member-box">
<div class="recommend-box">
  <div class="flex flex-jc-center pd10">
    <div class="tuijian-box flex flex-jc-center flex-ai-center">
      <i class="iconfont icon-weibiaoti2fuzhi13 col-white"></i>
    </div>
    <div class="col-red ml-10 flex flex-jc-center flex-ai-center">精选推荐</div>
  </div>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
  >
  <GoodCpt :data="goodItems"></GoodCpt>
  </van-list>
</div>
</div>
</template>

这里我们使用了vant的分页列表组件，来支持分页加载，把GoodCpt组件放到了List组件下，通过goodItems来控制传递给GoodCpt的数据。

总结

以上代码片段可供参考，具体使用或者测试，请根据需求进行修改，对以上教程有异议，可在评论区评论或者联系我QQ1004991278。

最后，以上所有代码在我的开源仓库：https://github.com/maxzyt/vue3-mall-page，都可以找到，喜欢的点个star。