组件：
组件可以简单的理解为模块化的单元，Vue组件能够提高代码重用性的。使用组件可以解决频繁更改需求的问题
将来每一个组件都是一个单独的文件，最终运行都会放在一个页面上。
组件都有的三步骤：声明、注册、使用；全局组件除外，因为全局组件声明的时候就已经注册了
全局组件：
指在不同作用域内均可使用的组件
代码演示：
<!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"> <hello></hello><!--使用--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> //声明加注册 Vue.component("hello",{ template:`<div>hello，{{name}}</div>`, data(){//这边也是可以加data以及其他的各种主属性 return{ name:"我是hello" } }, }) let app=new Vue({ el:"#app" }) </script> </html>
浏览器结果：
在HTML页面声明template：
当然局部组件也可以将template声明在HTML页面上，和全局的写法一样。
代码演示：
<!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"> <hello></hello><!--使用--> </div> <template id="myhello"> <div>hello，{{name}}</div> </template> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> //声明加注册 Vue.component("hello",{ template:"#myhello",//通过id选择器选择上面的id data(){ return{ name:"我是hello" } }, }) let app=new Vue({ el:"#app" }) </script> </html>
效果和刚开始的一样，我就不做演示了；此种方法在HTML页面写的时候有提示并且js里面也不会太乱，两种方法都行，喜欢用哪个就用哪个。
局部组件：
指只在定义该组件的作用域内可以使用的组件
局部组件第一种方式：
这次方式是声明注册在一起；这种方式不太建议使用，复用性不强并且js代码太多不方便查看
代码演示：
<!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"> <baibai></baibai><!--使用--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> let app=new Vue({ el:"#app", components:{ baibai:{//声明加注册 template:`<div>拜拜{{name}}</div>`, data() {//data是在局部组件baibai里面 return { name:"小明" } }, }, }, }) </script> </html>
浏览器结果：
局部组件第二种方式：
这次方式是声明和注册分开使用；这种方式当前主流使用，复用性强并且简洁易懂
<!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"> <baibai></baibai><!--使用--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var baibai={//声明 template:`<div>拜拜{{name}}</div>`, data() { return { name:"小明" } } } let app=new Vue({ el:"#app", components:{ baibai//注册 }, }) </script> </html>
上面注册我用的是简写；下面是写全的注册，基本上没人会把这个写全；
但是看到别人代码写全要能看懂
let app=new Vue({ el:"#app", components:{ baibai:baibai//注册 }, })
插槽slot：
插槽（slot）其目的在于让组件的可扩展性更强，用来混合父组件的内容与子组件自己的模板
举个栗子： 比如说游戏中的武器可以镶嵌宝石，但是你要先有槽才能往里插宝石。
匿名插槽：
匿名插槽从字面意思来理解就是没有名字的插槽，特点是可以放置任何想要放的内容
如果有多个插槽的话，使用匿名插槽页面就会有多个内容。
代码演示：
<!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"> <baibai> <div>我是插槽的内容</div><!--组件中间的内容--> </baibai><!--使用--> </div> </body> <script src="../js/vue2.7.js"></script><!--根据自己的vue文件地址--> <script> var baibai={//声明 template:`<div> <slot></slot> 拜拜{{name}} <slot></slot> </div>`, data() { return { name:"小明" } } } let app=new Vue({ el:"#app", components:{ baibai//注册 }, }) </script> </html>
浏览器结果：
因为写了两个插槽所以网页上输出了两个内容。
