vue,vue3组件封装，vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果，一块一块的grid布局效果

vue封装组件的简单模板

贴一个简单模板方便自定义组件的时候直接复制

<template>
    <div class="app-container">
        组件模板
    </div>
</template>
<script>
export default {
    // 组件名字
    name: 'VideoItem',
    // 组件参数
    props: {
      percentage: {
        type: Number,
        default: 0
      },
      title: {
       type: String,
       default: ''
      },
    },
    data() {
        return {
            courseID: '',
            labId: '',
            chapter: {},
        }
    },
    mounted() {
        this.initPic()
    },
    // 组件方法
    methods: {
        initPic() {
        }
    }
}
</script>
<style scoped="scoped" lang="scss">
</style>

vue3简单的页面基础模板

<template>
    <div class="app-container">
        <el-card>
            <div>
                {{ state.title }}
            </div>
            <div>
                <el-select v-model="state.schoolID" class="select-level" size="default" placeholder="请选择校区" clearable>
                    <el-option v-for="item in schoolList" :key="item.id" :value="item.id" :label="item.name" />
                </el-select>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts" name="tasks">
import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
const state = reactive({
    title: '更新',
    schoolID:null,
    schoolList: [
        {
            id: 1,
            name: "小"
        },
        {
            id: 2,
            name: "大"
        }
    ],
})
// 这样暴露出来后页面可以直接使用schoolList,而不需要state.schoolList
const { schoolList } = toRefs(state)
onMounted(() => {
})
</script>
<style scoped="scoped" lang="scss">
.app-container {
    padding: 15px
}
</style>

vue引入自定义的组件：

引入组件，@表示src的路径，也可以使用..等相对路径路径来引入

import FeedBack from '@/pages/feedback/feedback.vue'
export default {
  components: {
    FeedBack
  }
}

页面上使用即可

<FeedBack/>

给组件里边传递参数这样就行

<FeedBack title="学习活跃度" style="height:100%" />

完整一点的代码

<template>
  <div class="lab-course">
    <!--引入自定义组件-->
    <FeedBack/>
  </div>
</template>
<script>
//@表示src的路径，也可以使用..等相对路径路径来引入
import FeedBack from '@/pages/feedback/feedback.vue'
export default {
  components: {
    FeedBack
  },
  data() {
    return {
      courseID: ''
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
<style  lang="scss">
</style>

封装一个标题高亮格子的组件

效果如下，这样一块一块的格子效果，内容是做的插槽：

代码：

<template>
    <div>
        <div class="zuxia_grid">
            <div class="title_com">
                <div class="title_com_tag">
                </div>
                <div class="title_com_text">
                    {{title}}
                </div>
            </div>
            <div class="content">
              <slot name="content"></slot>
            </div>
        </div>
    </div>
  </template>
  <script>
  export default {
    // 组件名字
    name: 'ZuxiaGrid',
    // 组件参数
    props: {
      percentage: {
        type: Number,
        default: 0
      },
      title: {
       type: String,
       default: '默认标题'
      },
    },
    data() {
      return {
      }
    },
    components: {
    },
    mounted() {
    },
    beforeDestroy () {
    },
    methods: {
    }
  }
  </script>
<style lang="scss" scoped>
 .zuxia_grid{
    height: 100%;
    width: 100%;
    background-image: url("../../assets/img/boxbox4.png");
    border: 1px solid #0E466C;
    border-radius: 4px;
    .title_com{
      display: flex;
      padding-top: 22px;
      margin-left: 9px;
      .title_com_tag
      {
        width: 8px;
        height: 19px;
        background: #23FFFC;
        margin-left:10px;
        margin-top: -1px;
      }
      .title_com_text
      {
        margin-left: 10px;
        font-size: 22px;
        // 字体设置成白色会更亮一点
        color:#fff;
        // text-shadow:0px -5px 5px #B4D3F6;
        text-shadow: 0 0 10px #DBE5F0, 0 0 20px #DBE5F0, 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
        //从白色到B4D3F6这个颜色看着会更亮一点，因为两个颜色间隔更多
        // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;        
      }
    }
    .content
    {
      margin-left: 16px;
      margin-right: 16px;
    }
 }
</style>

使用

先引用组件

import ZuxiaGrid from '@/views/component/zuxia_grid.vue'
components: {
    ZuxiaGrid
},

然后在需要的地方引用即可,这里引用了三次

<div class="middle_com">
    <div class="middle_top"> 
    <ZuxiaGrid title="学习活跃度" style="height:100%">
      <template #content>
          11
      </template>
    </ZuxiaGrid>
  </div>
    <div class="middle_bottom"> 
    <ZuxiaGrid title="学习趋势图" style="height:100%">
      <template #content>
          22
      </template>
    </ZuxiaGrid>
  </div>
</div>
<div class="right_com">
    <ZuxiaGrid title="分析趋势" style="height:100%">
      <template #content>
          33
      </template>
    </ZuxiaGrid>
</div>

封装的组件更新一下增加了事件的传递，以及右边的三个小点小菜单等

<template>
  <div>
    <div class="zuxia_grid">
      <div class="title_com">
        <div class="title_com_tag">
        </div>
        <div class="title_com_text">
          {{ title }}
        </div>
        <!-- 右边的三个小点小菜单 -->
        <div class="title_com_menu" v-if="ShowtitleMenu" @click="$emit('menuclick', '可以传递需要的参数回去')">
          <div class="title_com_menu_dot"></div>
          <div class="title_com_menu_dot"></div>
          <div class="title_com_menu_dot"></div>
        </div>
      </div>
      <div class="content">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 组件名字
  name: 'ZuxiaGrid',
  // 组件参数
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '默认标题'
    },
    ShowtitleMenu:
    {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  components: {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.zuxia_grid {
  height: 100%;
  width: 100%;
  background-image: url("../../assets/img/boxbox4.png");
  border: 1px solid #0E466C;
  border-radius: 4px;
  .title_com {
    display: flex;
    padding-top: 22px;
    margin-left: 9px;
    position: relative;
    .title_com_tag {
      width: 8px;
      height: 19px;
      background: #23FFFC;
      margin-left: 10px;
      margin-top: -1px;
    }
    .title_com_text {
      margin-left: 10px;
      font-size: 22px;
      // 字体设置成白色会更亮一点
      color: #fff;
      // text-shadow: 0 0 100px #B4D3F6, 0 0 60px #B4D3F6, 0 0 70px #B4D3F6
      // 然后把数值改大一点就更暗了，数值越大越暗,可以根据需要调整
      text-shadow: 0 0 40px #B4D3F6, 0 0 80px #B4D3F6, 0 0 90px #B4D3F6 // 在把前面的一个删除了，后面的几个删除了，看着就更暗了，感觉就要舒服一些了
        //text-shadow: 0 0 30px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6
        //把前面几个删除了看着就要暗一些了也
        //text-shadow: 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
        // 这个太亮了后面要调暗一点
        //text-shadow: 0 0 10px #DBE5F0, 0 0 20px #DBE5F0, 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;
        //从白色到B4D3F6这个颜色看着会更亮一点，因为两个颜色间隔更多
        // text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;        
    }
    .title_com_menu {
      display: flex;
      position: absolute;
      right: 16px;
      margin-top: 5px;
      cursor: pointer;
      .title_com_menu_dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #fff;
        margin-left: 5px;
      }
    }
  }
  .content {
    margin-left: 16px;
    margin-right: 16px;
  }
}
</style>

引用组件的时候可以使用组件里边封装的事件处理menuclick

<ZuxiaGrid style="height:100%" title="教学动态" :ShowtitleMenu="true" @menuclick="menuclick()">

其他参考

https://www.tnblog.net/aojiancc2/article/details/4250