快捷導(dǎo)航

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

更新時(shí)間：2023年01月22日 10:07:51 作者：芳草斜陽(yáng)_晨光

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

前言

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

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

本位將以一個(gè)項(xiàng)目中用到的例子進(jìn)行描述哈

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

一、將子組件引入父組件

父子組件頁(yè)面展示情況：

父組件引入子組件相關(guān)代碼：

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

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

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

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

this.info = this.form_user; //父組件中相關(guān)的值賦值給info
this.dialogText = '編輯設(shè)備信息';
this.dialogFormNew = true;

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

1. 通過(guò)props接收父組件的傳值

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

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

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

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

子組件：這里主要通過(guò)子組件對(duì)話框取消和確定兩個(gè)點(diǎn)擊事件進(jìn)行傳值

   </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) => {
            //驗(yàn)證成功
            if (valid) {
              this.requestApi('edit'); //進(jìn)入api新增請(qǐng)求
            } else {
              //驗(yàn)證失敗
              console.log('error submit!!');
              return false;
            }
          });
        }
      }
},
closeDialog() {
      this.$emit('toClose', false); //通過(guò)$emit將參數(shù)false傳值給父組件toClose對(duì)應(yīng)的函數(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'); //這里將相關(guān)的數(shù)據(jù)傳回父組件
    }
</script>