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。