一、组件简介
1.1什么是组件
组件的出现,就是为了拆分Vue实例的代码量,能够让开发人员以不同的组件,来划分不同的功能模块,将来需要什么样的功能,去调用对应的组件即可。需要区分的是,模块化是从代码逻辑的角度进行划分的,主要是为了方便代码分层开发,保证每个功能模块的职能单一;而组件是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用。
定义一个新组件
1.2组件的用法:
创建一个Vue的实例,把这个组件作为自定义的元素来使用,将它写在盒子里面
二、组件的使用
2.1创建一个组件
全局组件的使用:在被注册之后,可以用在任何一个新建的Vue实例中,也包括琪组件树中的所有组件。
全局组件的创建方法:
使用Vue.extend方法创建一个组件模板对象,在使用Vue》component方法进行注册。
var coml=Vue.extend({
template:'<h3>这是myComl</h3>'
})
在其他地方使用组件时,需使用Vue.component方法注册组件的同时为组件命名
var component('myComl',coml)
注意:在为组件命名时,如果使用了驼峰式命名,则在引用组件的时候,需要把大写的驼峰改为小写字母,同时,两个单词之间,使用“-”连接。例如上述的例子应该这样写:
组件之间可以进行合并:书写格式如下
组件创建实例完整代码:
<div id="app">
<my-coml></my-coml>
</div>
<script>
Vue.component('myComl',{
template:'<h3>这是myComl</h3>'
})
var vm = new Vue({el:'#app'});
</script>
Vue.js提供了<template>标签来定义组件结构的模板,模板代码直接写在HTML结构中,通过id值绑定到组件内的template属性上
使用<template>标签创建组件的方法:
<div id="app">
<mycom></mycom>
</div>
<template id="tmpl">
<h3>这是通过template标签创建出来的组件</h3>
</template>
组件的书写形式,需要注意的是,<template>必须在被Vue实例对象控制的#app外面使用,来定义组建的HTML模板结构。无论是哪种方式创建出来的组件,组件的template属性指向的模板必须有唯一的根元素。
以下是书写错误的示例:
正确的应该为:
使用<template>标签来创建一个组件,这样的开发方式不容易出错,也更有利于复杂界面的编写,改善开发体验,提高开发效率。
局部组件的使用:局部组件也称为私有组件,通过Vue实例的component属性来实现。
局部组件的创建示例:
<div id="app">
<vmcoml></vmcoml>
</div>
<template id="teml">
<div>
<h3>我是vm实例对象的私有组件tmpl</h3>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{},
components:{
vmcoml:{
template:'#tmpl'
}
}
})
</script>
私有组件只能在创建该组件的Vue实例对象控制的区域使用。
2.2组件的数据和方法
在使用组件编写代码的过程中,还可以像Vue实例那样使用其他的选项,比如data,computed,methods,但是需要注意的是,在实例对象中的data作为一个对象,在组件data中必须是一个函数,而且必须将数据return出去。
组件中的data示例:
<div id="app">
<mycoml></mycoml>
</div>
<script>
Vue.component('mycoml',{
template:'<div>{{msg}}</div>',
data:function(){
return{
msg:'mycoml'
}
}
})
var vm new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
在组件中,如果return出的数据引用了外部的一个对象,那么这个对象就是共享的,而且JavaScript对象是引用关系,任何一方修改数据的时候都会同步,修改数据时会同时修改相同对象的数据发生变化。显然,这样的结果是不符合需求的,数据共享的话失去了复用的作用,所以需要建立新的data对象来实现。
2.3组建的切换
页面可以通过链接实现组件的切换。可以通过v-if和v-else指令来切换组件。下面是一个vue.js登陆界面实例,
<div id="app">
<a href=""@ click.prevent="comName='login'">登录</a>
<a href=""@ click.prevent="comName='reg'">注册</a>
<component :is="comName"></component>
</div>
<template id="login">
<div style="width:300px;height:200px;border:1px solid #ccc;text-align:center">
<h3>登录</h3>
<p>用户名:<input type="text"name="username"></p>
<p>密 码:<input type="password"name ="password"></p>
<p><input type = "button"value ="登录"></p>
</div>
</template>
<template id="reg">
<div style="width:300px;height:200px;border:1px solid #ccc;text-align:center">
<h3>注册</h3>
<p>手机号:<input type ="text"name="username"></p>
<p>密 码:<input type = "password" name = "password"></p>
<p>用戸名:<input type= "text "name = "username"></p>
<p><input type ="button"value="注册"></p>
</div>
</template>
<script>
Vue.component('login',{
template:'#login'
})
Vue.component('reg',{
template:'#reg'
})
var vm = new Vue({
el:'#app',
data:{
comName:'login',
}
})
</script>
实现组件的切换,需要修改<login v-if ="flag"></login> <reg v-else="flag'></reg>
改成如下样式
最后在data中的修改:
Vue对象实例中,不需要定义flag变量,但是需要定义“:is”属性绑定的变量值。
在上述案例代码中,想要实现多个组件切换,就可以修改使用的方法,在我们遇到多个页面切换的同时,我们可以更加便捷,高效的完成所需要达成的目标。
关于组件的内容,还有很多需要学习的地方,以上就是对vue.js组件的简单介绍以及一些代码的书写和使用方法,牛顿说过,我们都是在海边捡贝壳的孩子,知识之海广袤而深邃。