前言

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。

在大前端时代的三个前端框架vue angular的反应。很多人选择vue，github上vue的数量已经超过了react的数量。虽然明星并不代表vue更强，但从发展速度来说，vue确实很快。

在模块化的前端时代，一切都是组件，vue学习组件必不可少。

然而，在大多数人熟悉纯html和jq之后，当他们第一次接触vue的组件时，他们被蒙蔽了。今天就让我们以最简单的方式，带vue小白童鞋走进组件的世界吧~

今天我们来谈谈使用组件的三种方法

基本组件全局组件构造组件1。基本组件四个步骤

写好组件(废话~)，引用页面中的组件，在组件中声明组件，在页面中使用。让我们以一个按钮子组件为例

项目src结构：

组件通常放在“组件”文件夹下：

1.编写子组件：

模板按钮class=' BTN ' : style=' { color : color } ' slot/！-slot-/button/templatescriptexportdefault {//传递给子组件的参数被写入到prosprs : { color 3360 { type : string，//color参数类型default 3360 ' # 000 '//default black } } }/scriptstylescoped . BTN { width : 1360 height : 60px；border-radius : 10px；border:无；font-size : 15px；}/style2.3.4 .父组件：

模板div id='app '！-4.use-button color=' red '我是slot/Button/div/template script//2的值。请参考Button . vue ' export default { name : ' app '，//3页面上“@/components/中的组件导入按钮。在组件中声明组件组件： { Button }；/脚本效果：

2.全球成分的五个步骤

写个好组件(还是废话~)。向子组件添加安装方法。使用Vue.use方法在页面上使用它。1.子组件还是一样~ ~:

2.向子组件添加安装方法

Button.js :

从“”导入按钮组件。/button . vue '/add install method(插件方法)const button={ install : function(vue){ vue.component(' button '，button component)；} }//导出按钮导出默认按钮当然可以处理多个全局组件：

从“”导入按钮组件1。/Button1.vue“从导入按钮组件2”。/Button2.vue“从导入按钮组件3”。/button 3 . vue ' const button list=[button component 1，ButtonComponent2，button component 3]；//添加install method(插件方法)const button={ install : function(vue){ button list . foreach(button={//在这里，使用每个组件的name属性作为组件名vue.component (button.name，button)；})} }//导出按钮导出默认按钮3.4.main.js。

从“vue”导入Vue从“App”导入。/app . vue '/3从' @/components/Button . js '/4 vue . use(Button)导入Button；Newvue ({render:h=h (app)，})。$ mount ('# app') 5。在页面上使用app.vue:

模板div id='app '！-5.使用-button color=' blue '我是全局按钮/按钮/div/页面上的模板有以下效果：

2.构件构造的四个步骤

写一个好的组件(也* *是废话~) vue.extend构建一个组件来挂载Vue.prototype在js 1中使用。写一个好的子组件：

模板p class=' Message " { value } }/p/templatescriptexport default { data(){ return { value : }我是一个弹框' };}};/scriptstyle .消息{位置：已修复；bottom: 30px宽度： 200像素；背景-color: rgba(0，0，0，0.5)；color : # fffborder-radius : 10px；左侧： 50%;transform : translateX(-50%)；线高： 30px文本对齐：中心；font-size : 15px动画：消息淡出3s 1；}/* 加个简单动画*/@关键帧消息褪色{ 0% { opa city 3360 0；-web kit-transform : translate 3d(-50%、80%、0)；transform: translate3d(-50%、80%、0)；} 16% { opa city 3360 1；-web kit-transform : translate 3d(-50%，0，0)；transform: translate3d(-50%，0，0)；} 84% { opa city 3360 1；-web kit-transform : translate 3d(-50%，0，0)；transform: translate3d(-50%，0，0)；} 100% { opa city 3360 0；-web kit-transform : translate 3d(-50%、80%、0)；transform: translate3d(-50%、80%、0)；}}/style2 .vue.extend构建组件

Message.js :

从“Vue”导入Vue从""导入邮件/消息。vue '；//构造组件const Message构造函数=Vue。扩展(消息);//设置删除组件const removeDom=(目标)={ target。父节点。移除子代(目标);};//构造组件添加关闭方法消息构造器。原型。close=function(){ this。可见=假；removeDom(这$ El)；};const MessageDiv=(选项)={ //实例化组件const instance=新消息构造函数({ El :文档。CreateElement(' div ')，//组件参数，运用到组件内的数据数据：选项，});//在身体添加组件document.body.appendChild(实例$ El)；vue。nexttick(()={ instance。timer=setTimeout(()={//定时关闭组件实例。close()；}, 3000);});返回实例；};导出默认MessageDiv3。挂载Vue。原型

main.js :

从@/组件/消息。js ' vue。原型导入消息。$ message=Message4。使用：

模板div id='app '按钮颜色='blue' @click.native='msg '我是全局按钮/Button/div/templatescript从" @/组件/按钮. vue "导入按钮；导出默认{ name: 'app '，components: { Button }，methods : { msg(){//4 } .使用构造组件这个$message({value: '我是构造组件'});} }};/script效果：

以上就是三种组件的基本使用啦~~

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。