【下载文档:  vue2.0 自定义组件的方法（vue组件的封装）.txt 】

---

vue2.0 自定义组件的方法（vue组件的封装）
一、前言
之前的博客聊过 vue2.0和react的技术选型；聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。
vue 的ui框架现在是很多的，但是鉴于移动设备的复杂性，兼容性问题突出。像 Mint-UI 等说实话很不错了，但是坑也是不少，而且很多功能也是仅凭这些实现不了，这需要我们去封装自己的可复用组件
二、封装组件的步骤
1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。
os：思考1小时，码码10分钟，程序猿的准则。
2. 准备组件的好数据输入。即分析好逻辑，定好 props 里面的数据、类型。(后面详解)
3.准备组件的好数据输出。即根据组件逻辑，做好要暴露出来的方法。（后面详解）
4.封装完毕了，直接调用即可。
os： 代码可以不看，结论在文章最后
接下来以一个很简单的例子具体说明一下
现在先看一下demo的效果图
三、 demo代码
父组件：



子组件：



四、代码详解
1. 先说一下 props
我们在父组件中需要将子组件需要的数据导入，用法如下：

:searchList ="searchList" 就是我们的数据，这个可以写多个。这里我传输了2个参数过去，主要是做数据修改的说明。大家可以先忽略。
在子组件中，我们的接收和使用方法如下：
props: {
searchList: Array,
selectValue: Object
},
mounted() {
this.data = this.searchList
},
我们在 props 中接收数据，注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则报警告
二props对象中的数据，我们可以直接在当前组件中使用 this.searchList，可以直接使用。至于原理嘛，不懂的可以取脑补一下 js的原型 。os：这些基础，在这就不做详述了
以上就是props传递过来的数据的使用了。
2. emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？
这里提供 2 种实现方法，但是 第一种不推荐，强烈不推荐
方式一：
　　　selectValue: {
data: '1'
},
　　　　。。。。。。。。。。。。。。。
this.selectValue.data = '我被修改了'
即，父组件将 对象 数据传递给子组件，子组件直接修改props过来的对象的值
可以实现，感觉是一个比较快捷的方式。但是不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。
他的实现原理简单提一下： 这个对象、数组啦，是引用数据类型，说白了，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。
方式二：
正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）
// 子组件
this.$emit('selectFunc', value)
// 父组件

selectFunc(value) {
this.selectValue2 = value
console.log(this.selectValue)
console.log(this.selectValue2)
}
将父组件的方法注入子组件 @selectFunc ="selectFunc" ，然后在子组件中通过 $emit 调用他，并传递参数。达到修改的目的。
五、 总结
这里主要是总结一下vue组件封装的思路，帮大家梳理一下。很简单，和jQuery插件、react组件一样，所有组件都是一个套路，就是 函数思想。
组件就是做烤肠台机器，我放进去猪肉，再按一下各种开关，然后你给我烤肠。
1. 定义好 你需要使用者传入的数据
2. 定义好 你提供给使用者的方法
3. 写好组件的内部逻辑
这就OK了，一个完美的，可复用的组件就完成了。 os： 在此吐槽一下，那些自认为是优秀的组件，其实，别人拿着没法用的代码。
以上所述是小编给大家介绍的vue2.0 自定义组件的方法（vue组件的封装），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！