vue简单组件封装

最新推荐文章于 2025-06-10 21:41:44 发布

原创最新推荐文章于 2025-06-10 21:41:44 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

组件

3 篇文章

订阅专栏

本文介绍如何使用Vue.js封装可复用的组件，通过一个面板组件的实例，详细展示了组件的结构、属性传递及事件处理，有效提升代码复用性和维护效率。

组件封装用于多个类似的样式或功能，直接封装组件减少代码重复率，提高维护效率

例如一个面板panel：

效果图：（手机端）

vue创建一个panel.vue

<template>
    <div class="panel">
      <div class="panel-wrapper">
        <div class="panel-content">
          <div class="panel-content-l">
            <div class="panel-content-title" @click="handleClick">
              {{leftTitle}}
            </div>
            <div class="panel-content-info">
              {{leftInfo}}
            </div>
          </div>
          <div class="panel-content-m">
            <div class="panel-content-title">
              {{centerTitle}}
            </div>
            <div class="panel-content-info">
              {{centerInfo}}
            </div>
          </div>
          <div class="panel-content-r">
            <div class="panel-content-title">
              {{rightTitle}}
            </div>
            <div class="panel-content-info">
              {{rightInfo}}
            </div>
          </div>

        </div>
      </div>
    </div>
</template>

    export default {
      props: {// 要用到的值，用props传递
        leftTitle: '', 
        leftInfo: '',
        centerTitle: '',
        centerInfo: '',
        rightTitle: '',
        rightInfo: ''
      },
      methods: {
        handleClick () {
          this.$emit('leftTitleClick')
        }
      }
    }

<style scoped lang="scss"> /*用到Sass*/
.panel{
  margin: .24rem .25rem;
  position: relative;
  z-index: 10;
  .panel-wrapper{
    background-color: #fff;
    border-radius: 8px;
    .panel-content{
      display: flex;
      box-shadow: 0 0 8px 0 rgba(0,0,0,0.20);
      border-radius: 8px;
      position: relative;
      z-index: 1;
      .panel-content-l, .panel-content-m, .panel-content-r{
        flex: 1;
        text-align: center;
        margin: .28rem 0;
        position: relative;
        z-index: 9;
        overflow: visible;
        .panel-content-title{
          font-size: .24rem;
          color: #666;
        }
        .panel-content-info{
          margin: .06rem 0;
          font-size: .4rem;
          color: #5C84FD;
          font-weight: bolder;
        }
      }
      .panel-content-l, .panel-content-m{
        border-right: 1px dashed #bccdff;
      }
      .panel-content-l:after, .panel-content-m:after{
        position: absolute;
        right: -0.06rem;
        top: -.28rem;
        content: '';
        width: 0.1rem;
        height: 0.05rem;
        border-radius:0 0 0.1rem 0.1rem;
        background-color: #efeff4;
        z-index: 100;
      }
      .panel-content-l:before, .panel-content-m:before{
        position: absolute;
        right: -0.06rem;
        bottom: -.28rem;
        content: '';
        width: 0.1rem;
        height: 0.05rem;
        border-radius:0.1rem 0.1rem 0 0;
        background-color: #efeff4;
        z-index: 100;
      }
    }
  }
}
</style>

panel.vue完成，在需要的页面或组件中引入后即可

<Panel  leftTitle="左title" leftInfo="左信息123" @leftTitleClick="leftClick"
        centerTitle="中间title" centerInfo="中间info" 
        rightTitle="右边title" rightInfo="80%">
</Panel>
// 动态数据就:leftTitle="leftTitle"
<script>
export default {
    methods: {
        // 点击左边title触发方法
        leftClick () {
            console.log(1) // 控制台输出 1
        }
    }
}
</script>