首页 > 其他分享 >封装 Vue 组件的过程?

封装 Vue 组件的过程?

时间:2023-11-08 18:34:47浏览次数:36  
标签:Vue 封装 复用 组件 方法 页面

组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题

  1. 分析需求:确定业务需求,把页面中可以复用的结构,样式以及功能,单独抽离成一个文件,实现复用

  2. 具体步骤:使用 Vue.extend 方法创建一个组件,然后使用 Vue.component 方法注册组件,子组件需要数据,可以在 props 中接受定义,而子组件修改好数据后,想把数据传递给父组件,可以采用$emit 方法

标签:Vue,封装,复用,组件,方法,页面
From: https://www.cnblogs.com/yuhuo123/p/17818059.html

相关文章

  • vue3 使用elementUI饿了么el-table组件 动态循环自定义表头列数据
     在vue3上使用el-table组件自定义循环表头列;<el-table:data="list"v-loading="loading"border>      <!--@selection-change="handleSelectionChange"-->      <!--<el-table-columntype="selection"wi......
  • 【开源】基于Vue.js的学生日常行为评分管理系统的设计和实现
    一、摘要1.1项目介绍基于Vue+SpringBoot+MySQL的学生日常行为评分管理系统,包含了评分项目模块、评分数据模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,学生日常行为评分管理系统基于角色的访问控制,给学生、......
  • vue上传文件
    以下是上传的组件库,需要更改接口<template><divclass="upload-file"><el-uploadmultiple:action="uploadFileUrl":before-upload="handleBeforeUpload":file-list="fileList":limit="li......
  • vue3异步组件
    父组件中,子组件的加载一般是按照先后顺序加载的,子组件加载后才会加载父组件。一个页面的子组件很多,由于会先加载子组件,那么父组件可能会出现比较长的白屏等待时间大型项目,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件Vue提供defineAsyncComponent方法:import......
  • 38-Vue脚手架-过渡与动画
    Vue封装的过渡与动画在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名 transition讲解transition是vue内置的一个组件,我们可以直接使用。<transition>元素作为单个元素/组件的过渡效果。<transition>  只会把过渡效果应用到其包裹的内容上,而不会额......
  • 第三方组件及计算属性传参的问题解决方式
    1.前言唉,好想玩滋嘣。2.计算属性直接传参接收不到表格数据某一列需要用的计算属性时,模板中使用计算属性fullName就会直接调用fullName函数,而在模板中fullName(item)相当于fullName()(item),此处为函数柯里化。<el-table-columnlabel="名称"align="center"min-width=......
  • vue3异步组件
    父组件中,子组件的加载一般是按照先后顺序加载的,子组件加载后才会加载父组件。一个页面的子组件很多,由于会先加载子组件,那么父组件可能会出现比较长的白屏等待时间大型项目,可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件Vue提供defineAsyncComponent方法:import......
  • vuejs3.0 从入门到精通——Element Plus 组件库
    ElementPlus组件库一、ElementPlus 基于Vue3,面向设计师和开发者的组件库。二、完整导入https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。//main.tsimport{createApp}from'vu......
  • 使用TS进行Vue-Router的Meta类型扩展
    目录1、前言2、解决1、前言使用Vue-Router时,会将一些字段信息附加到路由的Meta对象里面,比如图标icon,标题,权限等,如下:{path:'/billboard/board/:boardId',name:'billboardBoard',props:true,component:()=>import('@/views/billboard/board.vue'),meta:{......
  • [Vue] 大屏自适应问题
     可视化大屏需要自适应各种屏幕,使用了DataV的dv-full-screen-container ,v-scale-screen,但都达不到要求,dv-full-screen-container随着屏幕缩放或分辨率变化,文字也相应变化了,v-scale-screen+DataV控件时,第一次加载页面时,DataV边框宽高没有调整过来,还需要稍微拉伸一下,触发......