Component 初识组件
组件作为vue学习中的重点之一,其强大的功能在vue编程中随处可见,组件就是制作自定义的标签。
全局化注册组件
全局化就是在构造器的外部用Vue.component来注册,我们注册现在就注册一个<xiaofan></xiaofan>的组件来体验一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <xiaofan></xiaofan> </div> <script type="text/javascript"> //注册全局组件 Vue.component('xiaofan',{ template:`<div style="color:red;">全局化注册的jspang标签</div>` }) var app=new Vue({ el:'#app', data:{ } }) </script> </body> </html>
我们在js中利用Vue.component(自定义标签名,对象(可以跟一个模版template)),然后在HTML中使用这个组件<xiaofan></xiaofan>
局部注册组件
正如其命名方式,局部注册组件,也就是在一个内部自定义的组件,只能在内部使用,所以其有作用域,超出了这个作用域也就无法使用。<!DOCTYPE html><html lang="en"<head>
<meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>component-1</title> </head> <body> <h1>component-1</h1> <hr> <div id="app"> <xiaofan></xiaofan> </div> <script type="text/javascript"> var app=new Vue({ el:'#app', components:{
"xiaofan":{
template:` <div style = "color:red;">局部注册组件</div>`
}
}
}) </script> </body> </html>
注意:我们是在app内部写的组件xiaofan,所以其只能在html中的app中使用,并且主要内部写组件或者其他,命名方式基本都加s,外部则不加,同时template后面的不是单引号,而是`也就是tab键上面的符号。