Vue组件
组件是Vue强大功能之一，运用它可以使代码的维护和复用率提高；它提供·了一种抽象，让我们可以使用独立可复用的代码构建大型项目
1.组件是什么
组件（Component）是对数据和方法的简单封装，Web中的组件其实可以看成是页面的一个组成部分，它是一个具有独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融合，最终成为一个完整的应用程序。
页面就是由一个个类似导航、列表、弹窗、下拉菜单这样的组件组成的，页面不过是多个组件的容器；当我们不需要或者替换某个组件时，可以随时删除或者替换，不会影响整个程序的运行。组件化的思想就是将一个巨大、复杂的任务拆分为多个小组件
在Vue中，组件是自定义的元素，Vue可以为它添加特殊功能，因为组件是可复用Vue的实例，所以它与Vue()接收相同的选项，例如data、computed、watch、methods……
2. 组件的创建和使用
组件有三种创建方式
第一种，使用Vue.extend()来创建
var myvue=Vue.extend({})
然后使用Vue.component(‘组件名称’，创建的模板对象)注册组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件创建1 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <myvue></myvue> </div> <script type="text/javascript"> var myvue=Vue.extend({ template:'<p>这是使用Vue.extend()创建的组件</p>' }) Vue.component('myvue',myvue) var vm=new Vue({ el:"#app", data:{}, methods:{}, }) </script> </body> </html> 复制代码
第二种，使用Vue.component()来创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件创建2 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <myvue2></myvue2> </div> <script type="text/javascript"> Vue.component('myvue2',{ template:'<p>这是使用Vue.component()创建的组件</p>' }) var vm=new Vue({ el:"#app", data:{}, methods:{} }) </script> </body> </html> 复制代码
第三种，使用template元素定义组件的html模板结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件创建3 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <myvue3></myvue3> </div> <template id="tem"> <p>这是通过template元素创建的组件</p> </template> <script type="text/javascript"> Vue.component('myvue3',{ template:"#tem" }) var vm=new Vue({ el:"#app", }) </script> </body> </html> 复制代码
3. 组件注册
组件注册包括全局注册和局部注册，组件注册的本质即自定义标签，其实是个小一点的Vue实例，必须在Vue实例化前声明
- 全局注册
要注册全局组件可以使用Vue.component()来进行创建 - 局部注册
全局注册即使已经不再需要某个组件，但是打包后还是会包含在最终的构建结果中
在Vue实例中，使用components可以局部注册一个组件，注册后组件只在该实例作用域下有效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件局部注册 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <mycomponents></mycomponents> </div> <script> var vm1={ template:'<p>这是一个局部组件</p>' } var vm=new Vue({ el:"#app", components:{ 'mycomponents':vm1 } }) </script> </body> </html> 复制代码
4. 组件嵌套
组件中还可以使用components嵌套组件，组件本身也可以包含组件
var child=Vue.extend({ template:'<p> child</p>' } ) var parent=Vue.extend({ template:'<p>parent</p>', components:{ 'child-component':child } }) Vue.component('parent-component',parent) 复制代码
当然也可以不用每次都调用Vue.extend()和Vue.component()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件嵌套 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <my-parent></my-parent> </div> <script> var child = { template:` <div> <h4>这是child组件</h4> </div> ` } var parent = { template:` <div style="border:1px solid red"> <h4>这是parent组件</h4> <my-child></my-child> </div> `, components:{ "my-child":child } } new Vue({ el:"#app", components:{ "my-parent":parent } }) </script> </body> </html> 复制代码
5.组件切换
组件切换：js动态控制template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组建切换 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <div class="container"> <button @click="comp='zujian1'">点击组件1</button> <button @click="comp='zujian2'">点击组件2</button> </div> <aaa :is="comp"></aaa> </div> <script> var app=new Vue({ el:"#app", data:{ comp:'zujian2', }, components:{ zujian1:{ template:'<h1>组件1</h1>' }, zujian2:{ template:'<h1>组件2</h1>' } } }) </script> </body> </html> 复制代码
6.组件中的data和methods
- 组件可以拥有自己的数据
- 组件中的data和实例的data有不同之处，实例中的data可以是一个对象，而组件中的data必须是一个方法
- 组件中的data除了是一个方法，还必须返回一个对象
- 组件中的data和实例中的data使用方法一样
- 组件中的methods的定义和使用与实例中的一样
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件中的data和methods demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <myvue></myvue> </div> <script type="text/javascript"> Vue.component('myvue',{ template:'<p>这是全局组件-{{msg}} {{msg1}}</p>', data:function(){ return { msg:'这是组件的data', msg1:'组件中的msg1' } } }) new Vue({ el:"#app", data:{ msg:"这是实例中的data数据" } }) </script> </body> </html> 复制代码
