山地人

组件化

山地人
山地人
2021-05-13

对于编程我们通过封装,来提高代码的复用性,对于界面我们也可以通过封装来提高界面的可复用性。

比如之前的课程列表,我们可以把列表中的每一项封装成对应的组件,下次再有要使用的地方,我们直接就可以把这个封装组件拿过去使用。另外组件化,也有利于组件内部的扩展维护。

下面我们还是通过实际的例子来学习下,如何在Vue中封装组件。

代码分析

我们这里定义了一个自定义的组件course-item,然后将这个自定义的标签替换了原来的li标签。 自定义组件,用到了Vue的component接口,

app.component('course-item', {
template: '<li>课程</li>'
})

第一个参数用来指定自定义标签的名称:course-item 后面一个参数是用来配置组件参数的,我们这里指定了一个固定的template

上面的代码,已经可以显示4个课程项目,但是课程的名称显示还不支持,所以我们需要让这个course-item组件支持显示名称。

定义组件的属性

Vue允许我们为组件定义属性,通过属性我们可以把外部的数据传送到组件内部,属性接口定义,我们只需要在component的第二个参数中,指定属性相关的参数即可

app.component('course-item', {
props: ["courseName"]
template: '<li>{{courseName}}</li>'
})

上面的例子中,我们为course-item定义了一个courseName属性,并在template中使用了这个属性。

通过组件化处理,我们可以把课程列表项的问题都隔离在course-item组件内部,这样这个组件内部的升级变动,只要不涉及对外接口的变动,都不涉及外部其他代码的调整。这就是组件化带来的好处。

而且一旦这个组件升级,所有使用到这个组件的地方也都自动升级了。

原生JavaScript写法

下面我们依然会脱离框架,用纯JS的方式展示类似的功能,让你可以进行对比。

在Vue中,我们通过component接口来配置组件。在原生JavaScript中,我们可以通过写function函数封装组件。