使用vue组件封装共用的组件

目录
  • 这里提供两种vue封装共用组件的方法
    • 方法一
    • 方法二
  • vue封装公共组件调用方法

这里提供两种vue封装共用组件的方法

方法一

main.js中

import ListItem from './components/list.vue'//封装共用组件方法一
Vue.component('ListItem',ListItem)

方法二

新建vue文件的时候再建个相应的js文件。

component.js

import child from './component.vue'

export default child.install = function (Vue) {
  Vue.component(child.name,child)
}

main.js中

import child from './components/component/component.js'//封装共用组件方法二
Vue.use(child)

通过上面的两种方法定义公共组件后都可以直接<child>和<component>这样调用组件了，无需在每个vue文件中important组件了。

说说方法二吧根据官方文档提供的api

vue使用install定义安装全局组件需要install和use这两个api来配合才能完成。我更喜欢第一种但是今天看了公司的代码认识到了第二种方法，也发现了vue提供了不少提高生产效率的api往后会继续深入去学习这些api。

同时也解决了一个困惑很长时间的问题，element ui中的message这个组件不需要vue.use安装直接就能用，因为element源码中直接将这个组件赋值到vue的prototype上了，其他的组件都只export 暴露出install方法所以其他组件需要vue.use安装

vue封装公共组件调用方法

需求：项目中所有的提示信息都是弹框样式的，并且显示两秒后自动消失

vue页面

<template>
  <!-- 公用提示信息页面 -->
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :show-close="false"
    top="40vh"
    width="30%"
  >
    <div class="content">
      <span>{{ text }}</span>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      text: ""
    };
  }
};
</script>
<style lang="less" scoped>
.content {
  font-size: 16px;
  color: #333;
  text-align: center;
  span {
    margin-left: 10px;
  }
}
/deep/ .el-dialog__header {
  padding: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 600;
  background-color: #08519c;
}
/deep/ .el-dialog__title {
  color: #fff;
}
</style>

js页面

// 公共提示信息js
import Vue from "vue";
import Toast from "./dialogMessage.vue"; //引入组件
// 返回一个“扩展实例构造器”
let ToastConstructor = Vue.extend(Toast);
let myToast = (text, duration) => {
  let toastDom = new ToastConstructor({
    el: document.createElement("div") //将toast组件挂载到新创建的div上
  });
  document.body.appendChild(toastDom.$el); //把toast组件的dom添加到body里
  toastDom.text = text;
  toastDom.duration = duration;
  // 在指定 duration 之后让 toast消失
  setTimeout(() => {
    toastDom.dialogVisible = false;
  }, toastDom.duration);
  // 调用时  this.$toast("新内容", 1000);
};
export default myToast;

在main.js中全局注册

import toast from "./components/dialogMessage.js"; //引入toast函数
  //给Vue对象添加$toast方法
  Vue.prototype.$toast = toast;

页面中使用，像使用message一样

 this.$toast("新内容", 1000);

效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3简单封装input组件和统一表单数据详解

    vue3简单封装input组件和统一表单数据详解

    目录 前言 准备工作 用原生 input 封装 Input 封装表单数据 使用表单数据 总结 前言 vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担. 本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据. 准备工作 用vue create example创建项目,参数大概如下: 用原生 input 原生的 input,主要是 value 和 change,数据在 change 的时候需要同步. App

  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    目录 一.需求场景描述 二.关键技术点介绍 1.v-bind="$attrs" 2.v-on="$listeners" 三.封装el-image的代码示例 总结 一.需求场景描述 实际开发的时候,为了减少重复造轮子,提高工作效率,节省开发时间成本, 免不了会使用ui组件库,比如在web前端很受欢迎的element-ui. 但有的时候,我们需要在原组件的基础上做些改造,比如一个image组件, 我们需要统一在图片加载失败的时候展示的特定图,每次使用组件都加一遍, 麻烦

  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    1.前提:业务需求,最多上传6张图片,并可以实现本地预览 2.解决方法:使用vant组件库中的van-uploader实现 3.代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v-model="fileList&

  • vue封装组件js版基本步骤

    vue封装组件js版基本步骤

    目录 什么是组件化: Vue组件化思想 一.注册组件的基本步骤 1.创建组件构造器c-input 2.注册组件 3.父组件使用 二.丰富组件 三.父子组件间的通讯 1.父---->子通信 [props Down] 2. 子----> 父传值 [Events Up] 3. 子<----> 父 双向传值 四.slot插槽 什么是插槽? 怎么用插槽? 具名插槽 作用域插槽 什么是组件化: 组件化就是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,使得整个页面

  • 使用vue组件封装共用的组件

    使用vue组件封装共用的组件

    目录 这里提供两种vue封装共用组件的方法 方法一 方法二 vue封装公共组件调用方法 这里提供两种vue封装共用组件的方法 方法一 main.js中 import ListItem from './components/list.vue'//封装共用组件方法一 Vue.component('ListItem',ListItem) 方法二 新建vue文件的时候再建个相应的js文件. component.js import child from './component.vue' export d

  • vue-echarts如何实现图表组件封装详解

    vue-echarts如何实现图表组件封装详解

    目录 背景: 有哪些工具? 怎么封装? 总结 背景: 需要大量使用图表的项目,为了提升开发效率,可以对图表类进行封装成组件,方便页面的搭建,也能进行统一管理维护,即使后面系统风格需要调整,调整起来也比较方便.快速. 有哪些工具? 常用的有Echarts.AntV,使用起来都大同小异,具体图表如何实现,看官网参数进行配置调整即可. 怎么封装? 以Echarts为例,效果截图 安装依赖,安装vue-echarts需要安装echarts,vue2下使用vue-echarts还需要安装@vue/comp

  • Vue v-model组件封装(类似弹窗组件)

    v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on

  • 在vue中封装的弹窗组件使用队列模式实现方法

    前言 由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器 什么是队列 队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue

  • vue之封装多个组件调用同一接口的案例

    背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法 直接return 接口调用的结果 export function getAll() { let all = []; let opt = { method: 'get', url: 'all/teacher', success: res => { all = res.data.value || []; }, fail: err => { tipInfo(err.data.desc, '提示', false, 'warnin

  • vue.js封装switch开关组件的操作

    我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t

  • Vue+ElementUI 封装简易PaginationSelect组件的详细步骤

    在实际开发工作中,经常会碰到当select下拉数据过需要做分页的情况这里简单介绍封装的一个Pagination-Select组件几个步骤封装的比较简易,可以根据自己的项目进行改动 /components/Pagination-Select/index.vue <template> <div id="PaginationSelect"> <el-select v-model="value" :placeholder="selec

  • vue中封装echarts公共组件过程

    vue中封装echarts公共组件过程

    目录 1.安装echarts 2.在mian.js中全局引入 3.下面开始封装图表 4.接下来只需要在需要显示图表的地方引入Echart.vue 定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线.区域.色系.字体),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式. 以下示例封装图表组件Echart.vue. 1.安装echarts npm install echarts --save npm install lodash --save // 若已安装

  • 基于Vue如何封装分页组件

    基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue.js移动端tab组件的封装实践实例

    vue.js移动端tab组件的封装实践实例

    这是vue.js系列文章第二遍,第一篇讲述的是如何搭建vue.js的开发环境,计划按进度做成一款完整的app,当然前提是时间允许的话.本文用到了stylus语法,至于为什么使用stylus而不去用sass,主要是因为stylus来自于Node.js社区.总之stylus是一款高效的CSS预处理器,具体使用不在本文讨论范围.好了,废话不说了,下面讲述怎么封装tababr的切换. 底部tab进行页面切换,会用到vue里面的路由,也就是vue-router 我们在安装vue-cli时选中默认安装vu

随机推荐