Vue中父子組件如何實現(xiàn)傳值

更新時間：2023年01月22日 10:07:51 作者：芳草斜陽_晨光

這篇文章主要介紹了Vue中父子組件如何實現(xiàn)傳值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

提示：這里可以添加本文要記錄的大概內(nèi)容

項目中往往會把一些常用的公共代碼抽離出來，寫成一個子組件?；蛘咴谝粋€頁面中的代碼太多，可以根據(jù)功能的不同抽離出相關代碼寫成子組件，這樣代碼結(jié)構(gòu)會更加簡潔明了，后續(xù)維護更加方便。

本位將以一個項目中用到的例子進行描述哈

提示：以下是本篇文章正文內(nèi)容，下面案例可供參考

一、將子組件引入父組件

父子組件頁面展示情況：

父組件引入子組件相關代碼：

示例：pandas 是基于NumPy 的一種工具，該工具是為了解決數(shù)據(jù)分析任務而創(chuàng)建的。

二、父組件如何傳值給子組件

父組件：通過數(shù)據(jù)綁定將數(shù)據(jù)傳遞給子組件

//父組件
<device-dialog
      :personInfo="info" //父組件通過賦值給info將表單數(shù)據(jù)傳給子組件
      :action="action" //判斷是新增還是編輯 add、edit
      :dialogText="dialogText" //對話框顯示的標題
      @toClose="dialogConfirm('cancel')" //關閉按鈕對應的函數(shù)
      @toComfirm="requestApi('getUser')" //確定按鈕對應的函數(shù)
      v-if="this.dialogFormNew" //控制對話框的顯示與隱藏
></device-dialog>

this.info = this.form_user; //父組件中相關的值賦值給info
this.dialogText = '編輯設備信息';
this.dialogFormNew = true;

三、子組件如何接收父組件傳過來的值并使用(props)

1. 通過props接收父組件的傳值

<script>
export default {
  name: 'personDetail',
  props: {
    personInfo: {
      type: Object,
      default: {}
    },
    action: {
      type: String,
      default: {}
    },
    dialogText: {
      type: String,
      default: {}
    }
  }
}
</script>

2. 將props的值賦值給子組件里的數(shù)組容器從而展示父組件傳過來的數(shù)據(jù)

created() {
    this.form_user = this.personInfo; //form_user是子組件對話框顯示表單數(shù)據(jù)的數(shù)組
  }

四、子組件如何傳值給父組件($emit)

子組件：這里主要通過子組件對話框取消和確定兩個點擊事件進行傳值

   </template>
    </div>
     <el-dialog>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogConfirm('cancel')">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogConfirm('confirm')"
        >
          確 定
        </el-button>
      </div>
    </el-dialog>
   </div>
  </template>
  
<script>
dialogConfirm(res) {
if (this.action === 'edit') {
        if (res === 'cancel') {
          this.closeDialog();
        } else {
          this.$refs['userForm'].validate((valid) => {
            //驗證成功
            if (valid) {
              this.requestApi('edit'); //進入api新增請求
            } else {
              //驗證失敗
              console.log('error submit!!');
              return false;
            }
          });
        }
      }
},
closeDialog() {
      this.$emit('toClose', false); //通過$emit將參數(shù)false傳值給父組件toClose對應的函數(shù)
    },
requestApi(action, verifyCB) {
      switch (action) {
        // 查看編輯
        case 'edit':
        this.$axios({
            method: 'post',
            url: '/office/roomDevice/updateLock?random=' + Math.random() * 10,
            data: {
              id: this.form_user.deviceId,
              deviceName: this.form_user.deviceName,
              deviceAddress: this.form_user.deviceAddress
            },
            headers: {
              Authorization: 'Bearer ' + sessionStorage.getItem('token')
            }
          })
            .then((res) => {
              console.log('編輯_res:', res);
              if (res.data.code === 0) {
                this.tips(res.data.message, 'success');
                this.comfirm();
              } else {
                this.tips(res.data.message, 'warning');
              }
            })
            .catch((error) => {
              console.error(error);
            });
          break;
     },
     comfirm() {
      this.$emit('toComfirm'); //這里將相關的數(shù)據(jù)傳回父組件
    }
</script>