一、前言
之前的博客聊过 vue2.0和react的技术选型;聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。
vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出。像 Mint-UI 等说实话已经很不错了,但是坑也是不少,而且项目中很多功能仅凭这些也实现不了,这需要我们去封装自己的可复用组件。
二、封装组件的步骤
1. 建立组件的模板,先把架子搭起来,写写样式,考虑好组件的基本逻辑。 os:思考1小时,码码10分钟,程序猿的准则。
2. 准备好组件的数据输入。即分析好逻辑,定好 props 里面的数据、类型。(后面详解)
3. 准备好组件的数据输出。即根据组件逻辑,做好要暴露出来的方法。(后面详解)
4. 封装完毕了,直接调用即可。
接下来以一个很简单的例子具体说明一下
现在先看一下demo的效果图
三、代码详解
1. 先说一下 props
我们在父组件中需要将子组件需要的数据导入,用法如下:
:searchList="searchList" 就是我们的数据,这个可以写多个。这里我传输了2个参数过去,主要是做数据修改的说明。大家可以先忽略。
在子组件中,我们的接收和使用方法如下:
props: {
searchList: Array,
selectValue: Object
},
mounted() {
this.data = this.searchList
},
我们在 props 中接收数据,注意props对象里面键值 是对改数据的 数据类型 的规定。做了规范,使用者就只能传输指定类型的数据,否则报警告
而props对象中的数据,我们可以直接在当前组件中使用 this.searchList,可以直接使用。这里要强调一下,props传过来的数据只做展示,不得修改,想修改,再新写一个data中的变量承接做数据的再处理。至于原因,同上,可以看一下js的原型。至于原理嘛,不懂的可以取脑补一下 js的原型 。 os:这些基础,在这就不做详述了。
以上就是props传递过来的数据的使用了。
2. emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了,那如子组件如何来修改父组件的数据呢?
这里提供 2 种实现方法,但是 第一种不推荐,强烈不推荐
方式一:
selectValue: {
data: '1'
},
。。。。。。。。。。。。。。。
this.selectValue.data = '我被修改了'
即,父组件将 对象 数据传递给子组件,子组件直接修改props过来的对象的值
可以实现,感觉是一个比较快捷的方式。但是不推荐,这种方式写多了,容易出错,特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好,所以建议大家别这样写。
他的实现原理简单提一下: 这个对象、数组啦,是引用数据类型,说白了,就是存储单元的信息是指针,真正数据在别的地方,通过指针查询的数据,所以这样写,对浏览器来说仅仅是传递了一个指针,数据还是同一份数据。所以你能修改。
方式二:
正儿八经的通过 $emit 方法去掉父组件的方法,在父组件中修改dat