前言
上一章博客我们讲解了Vue生命周期,列表过滤,计算属性和监听器
这一章我们来讲Vue组件开发
一，组件的使用
创建组件两种方式
var Header = { template:'模板' , data是一个函数, methods:功能, components:子组件们 }//局部声明
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了
组件的分类
- 通用组件（例如表单、弹窗、布局类等) (多个项目都可以复用)
- 业务组件（抽奖、机器分类）（本项目中复用）
- 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
组件开发三部曲：声明、注册、使用
注意：子组件的命名，如果有驼峰命名，在使用子组件标签时用“-”隔开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好,{{name}} <hello></hello> <saybyebye></saybyebye> </div> <template id="myhello"> <div>hello,{{name}}</div> </template> </body> <script src="../js/vue2.7.js"></script> <script> // 注册了一个全局组件，名字叫hello Vue.component('hello',{ template:`#myhello`, data(){ return{ name:'我是hello' } } }) // 定义一个局部组件 var saybyebye={ template:`<div>你好</div>` } var app = new Vue({ el:'#app', data(){ return{ name:"张三", } }, // 注册局部组件 components:{ saybyebye } }) </script> </html>
二，插槽slot
slot就是在声明子组件时给DOM留下的坑位，以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。
并且，坑位是可以命名的，也就是说，子组件在声明的时候命名坑位，方便父组件在指定的坑位中插入内容
slot是动态的DOM
- 插槽的使用：
- 步骤有两步：a.子组件上留坑。b.父组件使用子组件的时候，给坑里赋值.
- 要有父子组件作为前提。
- 目的是让子组件成为动态的组件。
匿名插槽
- 匿名插槽就是在声明的时候没有声明name，会把全部内容都显
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好,{{name}} <hello></hello> <saybyebye> <div>我是插槽的内容</div> </saybyebye> </div> <template id="myhello"> <div>hello,{{name}}</div> </template> </body> <script src="../js/vue2.7.js"></script> <script> // 注册了一个全局组件，名字叫hello Vue.component('hello',{ template:`#myhello`, data(){ return{ name:'我是hello' } } }) // 定义一个局部组件 var saybyebye={ template:` <div> <div>你好</div> // 插槽内容 <slot></slot> </div> ` } var app = new Vue({ el:'#app', data(){ return{ name:"张三", } }, // 注册局部组件 components:{ saybyebye } }) </script> </html>
具名插槽
- 具名插槽会在声明时，指定name。会在子组件中有选择的进行展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好,{{name}} <hello></hello> <saybyebye> <div slot="niu1">我是插槽的内容</div> <template #niu2> <div>你好niu2</div> </template> <template v-slot:niu3> <div>你好niu3</div> </template> </saybyebye> </div> <template id="myhello"> <div>hello,{{name}}</div> </template> </body> <script src="../js/vue2.7.js"></script> <script> // 注册了一个全局组件，名字叫hello Vue.component('hello',{ template:`#myhello`, data(){ return{ name:'我是hello' } } }) // 定义一个局部组件 var saybyebye={ template:` <div> <slot name="niu1"></slot> <div>你好niu1</div> // 插槽内容 <slot name="niu2"></slot> <slot name="niu3"></slot> </div> ` } var app = new Vue({ el:'#app', data(){ return{ name:"张三", } }, // 注册局部组件 components:{ saybyebye } }) </script> </html>
三，refs和parent
这两个属性的作用是获取到子组件实例数组和父组件实例。
有了实例，就可以很方便的操作组件的属性和方法。
refs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好{{name}} <button @click="ouda">打一顿</button> <Myheader ref="dawa"></Myheader> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var Myheader = { template:` <div> 子组件 {{xingming}}--{{Hp}} </div> `, data(){ return{ xingming:'林宇豪', Hp:100, } }, } var app = new Vue({ el:'#app', data(){ return{ name:'小豪', } }, methods:{ ouda(){ console.log("孽子，打一顿"); this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10 }, }, components:{ Myheader } }) </script> </html>
- parent
$refs的使用需要，在子元素上通过ref属性声明自己的引用名称
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> 大家好,我是{{name}} <Myheader ref="dawa"></Myheader> <Myheadererwa ref="erwa" ></Myheadererwa> </div> </body> <script src="../js/vue2.7.js"></script> <script> Vue.prototype.$middleBus = new Vue(); var Myheader = { template:` <div> </div> `, } var Myheadererwa = { template:` <div> <button @click="jiao">叫爷爷</button> </div> `, data(){ return{ } }, methods:{ jiao(){ this.$parent.name="爷爷" }, }, } var app = new Vue({ el:'#app', data(){ return{ name:'小豪', } }, components:{ Myheader, Myheadererwa } }) </script> </html>
