Vue父子组件传值

我们常用的父子组件组件传值的方式：通过props和$emit()来实现（这里不多做介绍），这种方式不好的一点是违背了单一数据流向

子组件中的值是从父组件中拿的，如果要直接修改父组件中值的信息会提示报错，还有另外一种修改方式就是通过$emit()，子组件触发事件冒泡到父组件中，在父组件中进行修改。
下面我们将介绍一种比较优雅的方式来操作父组件中的数据：

<!--子组件-->
<template>
  <div class="z-textarea">
    <el-input
      type="textarea"
      v-model="code"
      @change="changeCode"
    ></el-input>
    <el-button
      type="text"
      icon="el-icon-delete"
      @click="emptyParentCode()"
    >
      清空
    </el-button>
  </div>
</template>
<script>
export default {
  name: 'MyTextarea',
  data() {
    return {
      code: ''
    }
  },
  methods: {
    //清空内容，同时清空父组件值的内容
    emptyParentCode() {
      this.code = ''
      this.$emit('emptyPCode')
    },
    changeCode(v) {
    //更新Input框内容，同时更新父组件值的内容
      this.$emit('changeCode', v)
    }
  }
}
</script>


<!--父组件-->
<template>
  <my-textarea ref="MyTextarea" @emptyPCode="emptyCode" @changeCode="changeCode"></my-textarea>
</template>
<script>
export default {
  name: 'MyForm',
  data() {
    return {
      code: ''
    }
  },
  methods: {
    onReset() {
      this.$refs.MyTextarea.emptyParentCode();
    },
    emptyCode() {
    //父组件重新赋值
      this.code = ''
    },
    changeCode(v) {
    //父组件重新赋值
      this.code = v     
    }
  }
}
</script>

可以看到我们没有用props直接对子组件进行接收值，而是在子组件内部定义了一个变量code来控制自己的值（父组件中的code也是自己的）。
通过监听Input框的change事件来修改input的值，同时通过通知父组件更新父组件中的code值，以此来达到更新父组件中code的目的。
如果想要重置表单的操作，只需要在清空的方法中根据refs的值找到对应的组件，调用清空的方法即可。this.$refs.MyTextarea.emptyParentCode();

误区：如果你从父组件中传的内容在子组件中不做修改时，使用props没有任何问题。
好处：数据的流向比较明确

image.png