父组件向子组件传值（ref）---动态绑定动态属性

初始界面：

实现效果：其中输入框前的数据名称是通过父组件传值过来的

实现方式：

1.子组件页面，使用props接收

<template>
  <div class="set-auth-dialog-wrap">
    <el-dialog
      :title="'添加数据'"
      :visible.sync="dialogVisible"
      :show-close="true"
      width="38%"
      :close-on-click-modal="false"
      center
    >
      <div class="dialog-main">
        <div class="main-row">
          <div class="add-field">
            <div
              class="add-field-item"
              v-for="(item, index) in newArr"
              :key="index"
            >
              <div class="field-content">
                <div class="dialog-main-label">{{ item.field }}</div>
                <el-input
                  v-model="item.value"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="confirmDataInfo">确定</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

 props中的名称和父组件页面中的：后面的名称相同

export default {
  props: {
    formFieldArr: {
      type: Array,
      default() {
        return [];
      }
    },
}

 设置value这个值，因为父组件向子组件传值是单向下行绑定，一般只能用，不能修改，此处设置一个newArr数组，用来修改传来的值，因为输入框中的需要动态进行绑定

 mounted() {
    this.formFieldArr.forEach(item => {
      let obj = item;
      this.$set(obj, "value", "");
      this.newArr.push(obj);
    });
  },

data() {
    return {
      dialogVisible: false,
      input: "",
      newArr: []
    };
  },

2.父组件中：

使用ref进行引入

<FormAddData
          v-if="showAddData"
          ref="dMFormAddDataDialog"
          :formFieldArr="propArr"
          :tableName="$route.query.md5num"
        />

components: { FormAddData },

父组件中的值是通过接口引入的，本文在父组件中仅写相关引入方法，父组件怎样获取的不在讲述。