早期的web项目开发者通常都会写一张完整的html页面出来,到后来web项目越来越复杂,一个页面中包含了太多的html和js,阅读和修改变的困难了起来。现在的很多前端框架都支持模块化——将web页面根据功能分成一个一个的小块,然后再将它们放到一起组成一个完整的应用,而每个模块只留下一些必要的对外接口,这样功能就变的清晰了起来。vue的组件功能就是为了实现模块化开发的而存在的。
一、起步
先来看一个例子:
Vue.component('zu', { data: function () { return { count: 0 } }, template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>' }); let app = new Vue({ el: '#app', data: { } }); <zu></zu>
这个例子创建了一个简单的组件,当点击时可以看到数字的增加:
组件是可复用的Vue实例,所以每个组件都可以说是一个完整的Vue对象,也有data,methods,computed这样的选项,唯一的区别就是没有挂载元素的el选项。
组件可多次使用:
<zu></zu> <zu></zu> <zu></zu>
组件“zu”使用了3次,每一个中的data互不影响
从例子中可以看到,我们使用Vue.component的方法来创建一个组件,第一个参数是组件的名称(也是使用时的名称),data为组件的数据,template则是组件的模板。这个语法很好理解,只有data的语法似乎有些不太一样——组件的data必须是一个函数,在函数中返回一个对象。
组件的名称和普通的html的命名一样,另外也可以是驼峰式命名,在使用的时候用中划线语法:
Vue.component('zuJian', { data: function () { return { count: 0 } }, template: '<div>点击了{{count}}次 <button @click="count++">点击</button></div>' }); <zu-jian></zu-jian> <zu-jian></zu-jian>
为了统一期间,kano建议大家还是统一用中划线的语法命名组件。
二、组件树
通常来说一个应用会是一颗组件树的形式,我们来看一下官方文章中的组件形式图:
也就是说,一般一个应用中是由很多组件组成的,而组件之间也是包含的,大的组件中包含几个小的组件。
三、通过props向组件传值
到目前为止,组件似乎就是页面分割出去一部分的一个小型html页面,如果只是如此那么组件的功能将很不灵活,我们也难以根据外部的数据改变组件的显示。所以我们有props,它可以向组件中传值——某种意义上来说组件相对于页面就好像函数相对于代码而言,而props就是向函数中传递的参数。
实际上,组件中显示的数据通常是由外部传递进去的
Vue.component('zu', { props: ['title'], template: '<h2>{{title}}</h2>' }); <zu title="第一个组件"></zu> <zu title="第二个组件"></zu>
props是一个数组,定义组件可以接受的参数列表,在使用组件时,将参数以html属性的形式传进去就可以。
当然参数不一定就是字符串类型,传递对象类型的参数:
Vue.component('zu', { props: ['person'], template: '<div>{{person.name}} 年龄是:{{person.age}}</div>' }); let app = new Vue({ el: '#app', data: { person1: { name: '王二', age: 18 }, person2: { name: '二王', age: 80 } } }); <zu :person="person1"></zu> <zu :person="person2"></zu>
注意到绑定属性用的是“:person”,因为这次绑定的值是对象而不是简单的字符串直接量了。
在组件上使用v-for:
data: { person_list: [ { name: '王二', age: 18 }, { name: '二王', age: 80 } ] } <zu :person="person" v-for="person in person_list"></zu>
效果相同,可以看到组件的使用和普通的html标签的使用并无太大区别。
四、单个根元素
上面的组件的模板都很简单:只包含一个div元素。你可能会想我现在要建立一个模板,让上例中的姓名和年龄都单独占一行,如:
Vue.component('zu', { props: ['person'], template: `<div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div>` });
但如果你这么写,Vue会一个错,显示“every component must have a single root element”(每个组件必须只有一个根元素)。
解决方法是用一个根元素将它们包起来:
Vue.component('zu', { props: ['person'], template: `<div> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> </div>` });
注意这个根元素不能是template,它不是真正的元素。
以上就是kano个人技术博客对于vue组件基础的部分简介,下一篇kano将继续介绍vue组件。