Vue进阶（九十四）：自定义组件_前端 自定义组件

前面实现了父组件向子组件传递数据，那子组件如何来修改父组件的数据呢？

这里提供 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 调用，并传递参数，达到修改目的。

四