Fram/Lib

vue组件化开发

字数:2241    阅读时间:12min
阅读量:10930

一、什么是组件化开发

在实际的开发中一个页面往往有很多部分组成,我们通常会把这些部分抽离成不同区块单独进行开发,这种抽离成不同区块的开发方式就是组件化开发的思想;组件化就是根据ui界面划分出来、为了拆分vue实例代码量的可复用部分代码;根据不同的功能做成不同的组件,需要什么功能,再调用什么组件就好

二、组件的几种分类

  • 页面组件:根据vue-router产生的页面本质上也是组件,主要承载当前页面的 HTML 结构,数据处理展示等常规业务;整个文件较大,基本不会被复用,还原设计稿就行比较容易写
  • 业务组件:在当前业务下需要多次用到的业务代码,可以抽离出来成一个组件,在需要的地方复用;可能会包含一些数据请求,不具备所有业务通用特点
  • 基础组件:在开发中我们经常会用到一些功能性代码,这个时候我们就可以把它抽离出来,在不同的业务中去配置使用它;它具有高强度的抽离性和可配置的功能性

三、组件的定义和使用

四、组件的几个重要API:Data、Prop、Slot、Event

Data:用于存放数据和状态;与实例中的data不太一样,因为组件需要在多个地方使用,如果还是像实例中那样定义data,那么所有组件就会公用一个data,一个组件改变数据就会改变data的值,就会引起所有组件发生改变;但是如果每次调用组件的时候我们都返回一个新对象,那每个组件都会有自己专属的data,这样一个组件修改data里的数据就不会影响其他组件,所以组件的data必须是返回对象的一个函数

Prop: 定义组件可以接受哪些配置,组件的核心功能由它来确定,主要接收父组件传递过来的数据;定义了组件可以接收哪些可配置的属性。主要是用来接收父组件传递的数据。props接收属性时可以是数组形式,也可以是对象形式。如果写通用组件最好还是写对象的形式,这样可以设置属性的类型和默认值,也可以自定义校验属性的值;

修改props里的值:props是单向数据流,官方是不推荐直接在props里修改数据的,如果非要修改数据,最好还是通过$commit()触发父组件内方法,让父组件来修改;这里需要注意,当你修改的是引用类型的值时,你修改的是栈里边对应的数据,从而所有组件的数据都会发生改变,又因为修改引用类型的值并没有直接修改当前这个引用,所以vue并不会报错,尽管可以不报错也能修改引用类型的值,但是还是不建议这么操作因为prop定义时就是单向数据流......

Slot:插槽;我们的组件往往需要在相同部分展示不同的结构内容,我们不能把每一部分都写死,所以slot就应运而生,solt插槽相当于一个占位符,可以在你使用组件的时候自己决定每一部分该展示什么,使整个组件具有更强的拓展性;slot是vue提供的一个占位标签,可以在任何位置直接使用

后备插槽:当组件中一部分不确定的时候,我们可以预留一个插槽,在需要的地方插入合适的内容就好

具名插槽:在创建组件的时候往往会很多不确定的部分,这时候就会用到很多插槽,那么如何才能分清那个插槽对应那一部分呢?给slot添加name属性,在使用组件定义这一部分时使用template标签,在template标签上使用v-slot:slot的name值就可以(vue2.6以上版本,以下版本直接在需要的标签上使用slot: slot的name值就行)

作用域插槽:作用域插槽就是带有数据的插槽;一般我们定义完插槽,在向插槽填充内容的时候,数据都是由当前这个页面提供的(为方便理解,也可称为父组件),然而在一些组件中,子组件也会提供一些数据,这些带有数据的插槽就称之为作用域插槽;

由于父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的,也就是说父子组件不能够直接互相拿取数据,那么我们又如何在父组件里获取子组件当前部分的数据呢?slot为我们供了一种叫插槽prop的东西:在slot中绑定属性拿到需要的数据(<slot v-bind:user='userdata'/>),然后再在父组件中通过带值得v-slot来定义我们提供的插槽 prop 的名字 (<template v-slot:default='mydata'/>),如此一来就可以在父组件里使用当前插槽带来数据了;(注意vue2.6以上就废除了 slot-scope 改用v-slot:default=String方式了)

Event:组件的事件;在一些情况下我们会通过子组件的一些事件来触发父组件做一些操作;在子组件触发事件的时候通过$emit('myevent')将自定义事件提交给父组件vue实例,在父组件里通过@myevent来监听子组件提交上来的事件;注意这里提交事件最好不要使用驼峰命名,由于大小写的问题会监听不到,推荐使用纯小写或者'base-name'形式

五、组件间的通信方式

组件间的通信方式有很多种,大致分为父子组件传值和非父子组件传值;可以查看VUE组件间的几种通信方式

野生小园猿
励志做一只遨游在知识海洋里的小白鲨
查看“野生小园猿”的所有文章 →

发表评论

邮箱地址不会被公开。

相关推荐