本文主要介绍了使用vue组件封装共享组件，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

这里有两种vue封装通用组件的方法：方法一和方法二：vue封装通用组件调用方法。

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

方法一

在main.js中

从'导入项目。/components/list . vue '//封装共享组件的方法1

Vue.component('ListItem '，ListItem)

方法二

创建新的vue文件时，创建相应的js文件。

组件. js

从'导入子级。/component.vue '

导出默认的child.install=function (Vue) {

Vue.component(child.name，child)

}

在main.js中

从'导入。/Components/component/component . js '//封装通用组件的方法2

Vue.use(儿童)

用以上两种方法定义了公共组件后，就可以直接调用像child和component这样的组件了，不需要在每个vue文件中都有重要的组件。

先说方法二。根据官方文件提供的api

Vue使用安装定义来安装全局组件，这需要安装和使用API的配合。我比较喜欢第一种，但是今天看了公司的代码，体会到了第二种方法。我还发现vue提供了很多API来提高生产效率。我以后会继续研究这些API。

同时也解决了一个长期存在的问题。元素ui中的message组件可以直接使用，不需要vue.use安装，因为这个组件在元素源代码中直接赋给vue的原型，其他组件只导出暴露install方法，所以其他组件需要vue.use安装。

vue封装公共组件调用方法

要求：项目中所有的提示信息都是弹出框的形式，显示两秒后自动消失。

Vue页面

模板

!-公共提示信息页面-

el对话

Title='提示'

:visible.sync='dialogVisible '

:show-close='false '

top='40vh '

宽度='30% '

div class='内容'

span{{ text }}/span

/div

/el-dialog

/模板

脚本

导出默认值{

data() {

返回{

dialogVisible: true，

文本：“”

};

}

};

/脚本

style lang='less '范围

.内容{

字体大小：16px

颜色：# 333；

文本对齐：居中；

跨度{

左边距：10px

}

}

/深/。el-dialog__header {

填充：0；

高度：50px

行高：50px

文本对齐：居中；

字体粗细：600；

背景色：# 08519c

}

/深/。el-dialog__title {

颜色：# fff

}

/风格

Js页面

//公共提示信息js

从“Vue”导入Vue；

从'导入吐司。/dialog message . vue '；//引入组件

//返回“扩展实例构造函数”

let Toast constructor=vue . extend(Toast)；

let myToast=(text，duration)={

let toast DOM=new toast constructor({

El:document . createelement(' div ')//在新创建的div上挂载toast组件

});

document . body . appendchild(toast DOM。$ El)；//将toast组件的dom添加到正文中

toastDom.text=text

toastDom.duration=duration

//指定持续时间后让toast消失

setTimeout(()={

toast DOM . dialog visible=false；

}，toast DOM . duration)；

//这个。调用时$toast('新内容'，1000)；

};

导出默认myToast

main.js中的全局注册

从'导入吐司。/components/dialog message . js '；//引入吐司功能

//将$toast方法添加到Vue对象

Vue.prototype. $ toast=toast

页面，就像使用消息一样。

这个。$toast('新内容'，1000)；

影响

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。