二props对象中的数据，我们可以直接在当前组件中使用 this.searchList，可以直接使用。至于原理嘛，不懂的可以取脑补一下 js的原型 。os：这些基础，在这就不做详述了
以上就是props传递过来的数据的使用了。
2. emit的使用(如何暴露组件方法)
我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？
这里提供 2 种实现方法，但是 第一种不推荐，强烈不推荐
方式一：
selectValue: { data: '1' }, 。。。。。。。。。。。。。。。 this.selectValue.data = '我被修改了'
即，父组件将 对象 数据传递给子组件，子组件直接修改props过来的对象的值
可以实现，感觉是一个比较快捷的方式。但是不推荐，这种方式写多了，容易出错，特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好，所以建议大家别这样写。
他的实现原理简单提一下： 这个对象、数组啦，是引用数据类型，说白了，就是存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。
方式二：
正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。（根正苗红的方法，规范写法）
// 子组件 this.$emit('selectFunc', value) // 父组件 <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search> selectFunc(value) { this.selectValue2 = value console.log(this.selectValue) console.log(this.selectValue2) }
将父组件的方法注入子组件 @selectFunc ="selectFunc" ，然后在子组件中通过 $emit 调用他，并传递参数。达到修改的目的。
五、 总结
这里主要是总结一下vue组件封装的思路，帮大家梳理一下。很简单，和jQuery插件、react组件一样，所有组件都是一个套路，就是 函数思想。
组件就是做烤肠台机器，我放进去猪肉，再按一下各种开关，然后你给我烤肠。
1. 定义好 你需要使用者传入的数据
2. 定义好 你提供给使用者的方法
3. 写好组件的内部逻辑
这就OK了，一个完美的，可复用的组件就完成了。 os： 在此吐槽一下，那些自认为是优秀的组件，其实，别人拿着没法用的代码。