vue 父組件與子組件直接的相互傳值

1.父組件傳值給子組件

html:  子組件：addFinancialUser 

<template>
  <div class="main-content adminStyle">
    <div class="condition" v-if="status">
      <el-row class="row-bg">
        <div class="condition-box">
          <el-col :span="20">
            <div class="col-2 col">
              <el-button @click="addFinancialUserBtn" size="small" type="primary">新增</el-button>
            </div>
          </el-col>
          <el-col :span="4" class="query-operate">
            <el-row>
              <el-col :span="18">
                <div class="col-1 col">
                  <label>機構名稱：</label>
                  <el-input v-model="searchData.name" placeholder="請輸入機構名稱" class="ipt-name"/>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="query-btn">
                  <el-button type="primary" class="inquiry-btn" @click="inquiryBtn">查詢</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </div>
      </el-row>
      <div class="table-list">
        <el-table :data="infoList"  :header-cell-style="{background:'#EEF5FD'}" border style="width: 100%">
          <el-table-column prop="id" min-width="20" label="序號"></el-table-column>
          <el-table-column prop="userName" min-width="50" label="登錄賬號"></el-table-column>
          <el-table-column prop="finName" label="機構名稱"></el-table-column>
          <el-table-column prop="finType"  min-width="50" label="機構類型">
            
            <template slot-scope="scope">
              <span>{{ finTypeName[scope.row.finType - 1] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="finPhone" min-width="60" label="機構聯系方式"></el-table-column>
          <el-table-column label="啟用/凍結" min-width="50">
            <template slot-scope="scope">
              <el-switch 
                v-model="scope.row.status" 
                :width='52' 
                active-color="#FF8D31" 
                inactive-color="#E6E6E6"
                :active-value='1'
                :inactive-value='0'
                @change="switchChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operate-btn">
                <el-button type="text" size="small" @click="resetPasswordBtn(scope.row.id)">重置</el-button>
                <el-button type="text" size="small" @click="editorBtn(scope.row)">編輯</el-button>
                <el-button type="text" size="small" @click="delectBtn(scope.row.id)">刪除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
          <div class="pagination-per">
          <pagination :pagination="pagination" @changePage="handleChangePage"/>
        </div>
    </div>
    <addFinancialUser v-if="!status" :status="statustype" :oData="formData" @cancel="cancelFn" @confirm="confirmFn"></addFinancialUser>
  </div>
</template>

script：在父組件中，通過屬性oData向子組件傳遞formData的參數

<script>
import { platform } from "@/api/platformApi.js";
import addFinancialUser from './addFinancialUser.vue'
export default {
  name: "paltformFinancial",
  components: {addFinancialUser},
  data() {
    return {
      status: true,
      statustype: 0,
      selectVal: [],
      name: "",
      selectList: [
        {
          value: "選項1",
          label: "啟用"
        },
        {
          value: "選項2",
          label: "凍結"
        }
      ],
      searchData: {
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      infoList: [],
      pagination: {},
      finTypeName: ['銀行', '證券公司', '保險公司', '信托投資公司', '基金管理公司'],
      formData: {
        username: '',
        name: '',
        type: '',
        creditCode: '',
        address: '',
        phone: '',
        information: '',
      },
    };
  },
  created() {
    this.ajaxData();
      // this.pagination.total = this.infoList.length
  },
  methods: {
    // handleClick: function(obj) {
    //   this.$router.push({ path: "" });
    // },
    // btnFn() {
    //   this.ajaxData();
    // },
    cancelFn() {
      this.status = true;
    },
 confirmFn(data) {
　　　　this.infoList = data; this.status = true;
      this.ajaxData(); },
    resetPasswordBtn(id) {
      platform.resetPassword(id).then(res => {
        if(res.data.code == '200') {
          this.$message({
            type: "success",
            message: "密碼重置成功!",
            duration: 3000,
          });
        }
      })
    },
    delectBtn(id) {
      platform.userDel(id).then(res => {
        if(res.data.code == '200') {
          this.$message({
            type: "success",
            message: "用戶刪除成功!",
            duration: 3000,
          });
        }
      })
    },
    switchChange(value) {
      platform.liveOrDead(value.id).then(res => {})
    },
    inquiryBtn() {
      this.ajaxData();
    },
    handleChangePage: function(data) {
      this.infoList = data.tableData;
      this.pagination = data.pagination;
    },
    // 請求
    ajaxData() {
      this.infoList = [];
      platform.findFinancialQuery(this.searchData).then(res => {
        if (res.data.data.listData.length > 0) {
          this.infoList = res.data.data.listData;
          this.pagination = {
            pageNum: 1,
            pageSize: 10,
            total: res.data.data.total || 0,
            url: "/financial/sysUserManager/findFinancialQuery",
            params: this.searchData,
            method: "post"
          };
        } else {
        }
      })
      .catch(err => {
        console.log("error:", err);
      });
    },
    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePreview(file) {
    //   console.log(file);
    // },
    // handleExceed(files, fileList) {
    //   this.$message.warning(
    //     `當前限制選擇 3 個文件，本次選擇了 ${
    //       files.length
    //     } 個文件，共選擇了 ${files.length + fileList.length} 個文件`
    //   );
    // },
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`確定移除 ${file.name}？`);
    // },
    addFinancialUserBtn() {
      this.status = false;
      this.statustype = 0;
      this.formData = {
        username: '',
        name: '',
        type: '',
        creditCode: '',
        address: '',
        phone: '',
        information: '',
      }
    },
    editorBtn(data) {
      this.status = false;
      this.statustype = 1;
      this.formData = {
        username: data.username,
        name: data.name,
        type: data.type,
        creditCode: data.creditCode,
        address: data.address,
        phone: data.phone,
        information: data.information,
      }
    }
  }
};
</script>

子組件中：html

<template>
  <div>
    <el-header class="header">
      <span>金融機構用戶管理</span>
      <i>|</i>
      <span>{{ status == 0 ? '新增用戶' : '編輯用戶'}}</span>
    </el-header>
    <el-main class="main">
      <el-form :model="formData" :rules="rules" ref="formItem" label-width="120px">
        <el-form-item label="登陸賬號：" prop="username">
          <el-input v-model="formData.username" placeholder="請填寫登陸賬號" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="機構名稱：" prop="name">
          <el-input v-model="formData.name" placeholder="請填寫機構名稱" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="機構類型：" prop="type">
          <!-- <el-input v-model="formData.type" placeholder="請填寫機構類型" class="formInput"></el-input> -->
          <el-select v-model="formData.type" :popper-append-to-body="false">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="統一社會信用代碼：" prop="creditCode">
          <el-input v-model="formData.creditCode" placeholder="請填寫統一社會信用代碼" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="聯系地址：" prop="address">
          <el-input v-model="formData.address" type="textarea" placeholder="聯系地址" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="機構聯系電話：" prop="phone">
          <el-input v-model="formData.phone" placeholder="請填寫機構聯系電話：" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="機構簡介：" prop="information">
          <el-input v-model="formData.information" type="textarea" placeholder="請填寫機構簡介" class="formInput"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <!-- <el-button @click="">取 消</el-button> -->
        <div class="primary-btn primary-btn1" @click="canceBtn">取消</div>
        <div class="primary-btn primary-btn2" v-if="status == 0" @click="submitAddForm">新增</div>
        <div class="primary-btn primary-btn2" v-if="status == 1" @click="submitEditorForm">編輯</div>
      </div>
    </el-main>
  </div>
</template>

 

script：通過props里定義屬性，然后再data中接收來自父組件的屬性值formData:this.oData

<script>
import { platform } from "@/api/platformApi.js";
export default {
  name: "addInfo",
  props: {
    status:{
      type: Number,
      default: 0
    },
 oData: { type: Object, default: {
        username: '',
        name: '',
        type: '',
        creditCode: '',
        address: '',
        phone: '',
        information: '', } }
  },
  data() {

    let regCode = /^[A-Z0-9]{18}$/;
    let regPhone = /^([0-9]{11})?$/;

    // 手機號碼驗證
    let validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入手機號碼'));
      } else if (!regPhone.test(value)) {
        callback(new Error('請輸入正確的手機號碼'));
      } else {
        callback();
      }
    };

    // 社會信用代碼驗證
    let validateCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入社會信用代碼'));
      } else if (!regCode.test(value)) {
        callback(new Error('請輸入正確的社會信用代碼'));
      } else {
        callback();
      }
    };

    return {
      dialogFormVisible: false,
    formData: this.oData,
      rules: {
        username: [
          { required: true, message: '請填寫用戶名', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '請填寫機構名稱', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '請選擇機構類型', trigger: 'blur' }
        ],
        creditCode: [
          { validator: validateCode, trigger: 'blur' }
        ],
        phone: [
          { validator: validatePhone, trigger: 'blur' }
        ],
        information: [
          { required: true, message: '請填寫機構簡介', trigger: 'blur' }
        ]
      },
      typeList: [
        {
          value: '',
          label: "請選擇類型"
        },
        {
          value: 1,
          label: "銀行"
        },
        {
          value: 2,
          label: "證券公司"
        },
        {
          value: 3,
          label: "保險公司"
        },
        {
          value: 4,
          label: "信托投資公司"
        },
        {
          value: 5,
          label: "基金管理公司"
        }
      ],
      type: ''
    }
  },
  watch: {
    oData: {
      handler(newName) {
        this.formData = newName;
      },
      deep: true
    }
  },
  created() {
    // this.type = this.route.query.type;
    // this.formData = this,.
  },
  methods: {
   submitAddForm() {
      this.$refs['formItem'].validate(valid => {
        if (valid) {
          platform.addFinancial(this.formData).then(res => {
              if (res.data.code == '200') {
                this.dialogFormVisible = false;
                this.$message({
                  type: 'success',
                  message: '添加成功!',
                  duration: 2000,
                  onClose: () => {
                    this.$emit('confirm'，this.formData)
                  }
                })
              }
            })
            .catch(err => {})
        } else {
          return false
        }
      })
    },
    submitEditorForm() {
      this.$refs['formItem1'].validate(valid => {
        if (valid) {
          platform.modifyFinancial(this.formData1).then(res => {
              if (res.data.code == '200') {
                this.dialogFormVisible1 = false;
                this.$message({
                  type: 'success',
                  message: '編輯成功!',
                  duration: 2000,
                  onClose: () => {
                    this.$emit('confirm')
                  }
                })
              }
            })
            .catch(err => {})
        } else {
          return false
        }
      })
    },
    canceBtn() {
      this.$emit('cancel')
    }
  }
};
</script>

 

 

 

2.子組件向父組件傳值：通過觸發事件傳值 子組件通過某個動作觸發父組件的自定義事件this.$emit('comfirm',this.formData)   

 父組件通過@confirm事件來觸發confirmFn來接收來自子組件的data。