日常开发记录-正确的prop传参，reduce搭配promise的使用

1.正确的prop传参

一般会的父组件传参子组件

//父组件
<A :demodata.sync="testData" :listData.sync="testData2"></A>
data () {
   
    return {
   
      testData: {
   
        content: '',
        textStyle: {
   
          fontsize: '14px',
        },
      },
      testData2: [
        {
   
          content: '11',
          textStyle: {
   
            fontsize: '14px',
          },
        },
      ],
    }
  },
//子组件
<el-input v-model="demodata.content"></el-input>

然后子组件v-model，看着和使用起来是可以达到双向绑定的，但是是不推荐这样改的。

//子组件
<template>
  <div>
    {
   {
    demodata }}
    <!-- 不要直接修改 props，使用事件通知父组件更新
使用 .sync 修饰符或 v-model 实现双向绑定,这种感觉单个属性可以，类似“监听”整个对象数组貌似不太行 -->
    <el-input :value="demodata.content" @input="changeInput"></el-input>

    <el-table :data="localData">
      <el-table-column prop="content" label="姓名"></el-table-column>
    </el-table>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>
export default {
   
  props: {
   
    demodata: {
   
      type: Object,
      default: () => {
    }
    },
    listData: {
   
      type: Array,
      default: () => []
    }
  },
  data () {
   
    return {
   
      localData: [...this.listData]
    }
  },
  watch: {
   
    listData: {
   
      handler (newVal) {
   
        this.localData = [...newVal]
      },
      deep: true
    }
  },

  mounted () {
   
  },
  methods: {
   
    changeInput (val) {
   
      this.$emit('update:demodata', {
   
        ...this.demodata,
        content: val
      })
    }, add () {
   
      this.localData.push({
    name: