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

 更新时间:2022年05月27日 11:49:10   作者:养只猫  
这篇文章主要介绍了使用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);

效果

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解读vue页面监听store值改变问题

    解读vue页面监听store值改变问题

    这篇文章主要介绍了解读vue页面监听store值改变问题,具有很好的参考价值,希望对大家有所帮助。
    2022-10-10
  • elementUI中el-table表头和内容全部一行显示完整的方法

    elementUI中el-table表头和内容全部一行显示完整的方法

    最近参与web开发时,让我解决一个elementui控制内容单行显示,下面这篇文章主要给大家介绍了关于elementUI中el-table表头和内容全部一行显示完整的方法,需要的朋友可以参考下
    2023-06-06
  • nuxtjs中如何对axios二次封装

    nuxtjs中如何对axios二次封装

    这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中element 上传功能的实现思路

    vue中element 上传功能的实现思路

    这篇文章主要介绍了vue中element 的上传功能的实现思路,本文大概通过两种实现思路,具体内容详情大家跟随脚本之家小编一起看看吧
    2018-07-07
  • vue如何通过src引用assets中的图片

    vue如何通过src引用assets中的图片

    这篇文章主要介绍了vue如何通过src引用assets中的图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue2.x双向数据绑定原理解析

    vue2.x双向数据绑定原理解析

    双向数据绑定原理主要运用了发布订阅模式来实现的,通过Object.defineProperty对数据劫持,触发getter,setter方法,这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下
    2023-02-02
  • 解决vue中props对象中设置多个默认值的问题

    解决vue中props对象中设置多个默认值的问题

    props中设置了默认值,但是获取时(获取父页面没有传的属性) 打印出来是undefined,所以本文给大家介绍了解决vue中props对象中设置多个默认值的问题,需要的朋友可以参考下
    2024-04-04
  • vue项目实战总结篇

    vue项目实战总结篇

    离放假还有1天,今天小编抽空给大家分享前端时间小编做的vue项目,非常完整,需要的朋友参考下
    2018-02-02
  • 详解Vue新增内置组件的使用

    详解Vue新增内置组件的使用

    这篇文章主要为大家介绍了Vue新增内置组件的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue路由懒加载工作原理

    vue路由懒加载工作原理

    Vue路由懒加载是一种优化技术,旨在减少应用程序的初始加载时间并提高性能,这篇文章给大家介绍vue路由懒加载的相关知识,感兴趣的朋友跟随小编一起看看吧
    2024-05-05

最新评论