vue 自己封装过哪些通用组件,vue自己封装组件 vue项目中
本文主要介绍了使用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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。