vue3父組件和子組件如何傳值實例詳解

更新時間：2022年08月04日 09:26:54 作者：湘鍋鍋

近期學習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下

1.父組件打開子組件的的dialog組件

??新建一個vue文件命名為test

??然后咱們直接從官網(wǎng)CV一個帶有表單的dialog組件如下

 //子組件
<template>
  <el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
  import { reactive, ref } from "vue";
 
  const formLabelWidth = '140px'
 
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
 
</script>
 
<style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>

??父組件就只需要一個按鈕然后加上咱們的點擊事件

<template>
  <el-button type="primary" @click="handlerDialog"
  >添加用戶
  </el-button>
  <test />
</template>
 
<script setup>
  import { reactive, ref } from "vue";
  import test from './test'
 
  const dialogFormVisible = ref(false)
 
  const handlerDialog = () => {
    dialogFormVisible.value = true
  }
</script>
 
<style scoped>
 
</style>

然后這個時候發(fā)現(xiàn) 彈窗怎么點就是出不來

注意原因就是咱們的 dialogFormVisible.value值還沒傳給子組件所以是打不開的

這個時候就要用到v-model進行數(shù)據(jù)綁定

所以父組件要進行修改在test這里加上如下內(nèi)容

<test v-model="dialogFormVisible"
        v-if="dialogFormVisible"/>

同樣子組件也要修改這里注意是不能用v-model的雖然官網(wǎng)的默認自帶v-model

但我們要作為子組件的話 vue3子組件是不能用v-model和父組件進行雙向綁定的

那該怎么實現(xiàn)父子組件進行數(shù)據(jù)傳遞呢咱們慢慢道來咱們先實現(xiàn)父組件如何把dialogFormVisible的值傳給子組件

其實很簡單在官網(wǎng)給的文檔里面有這一行

model-value 單向數(shù)據(jù)綁定

直接拿來CV到咱們的子組件上去

 <el-dialog :model-value="dialogFormVisible" title="Shipping address">

然后再去測試一下可以了?。。?/p>

2.父組件關(guān)閉子組件的的dialog組件

點擊那個叉叉按鈕可以關(guān)閉dialog組件但是點擊Cancel和Confirm按鈕毫無反應(yīng)

沒錯就是子組件沒有傳值到父組件上面去所以?。?！重點來了

??defineEmits

子組件向父組件事件傳遞

通俗點就是子組件可以調(diào)用父組件的方法并且可以傳參

所以在我們的子組件里面修改以下代碼

<template>
  <el-dialog :model-value="dialogFormVisible" title="Shipping address">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        //加上關(guān)閉的點擊事件
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="handleClose">Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
//記得引入defineEmits
  import { reactive, defineEmits,ref } from "vue";
 
//實例化defineEmits
 const emits = defineEmits(['update:modelValue'])
 
//關(guān)閉的點擊事件
  const handleClose = () => {
    emits('update:modelValue', false)
  }
 
  const dialogFormVisible = ref(false)
 
  const formLabelWidth = '140px'
 
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })
</script>
 
<style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
</style>

然后再去試試完美解決?。。?/p>

3.開始運用：用戶的增加修改操作

這個想必并不陌生一般情況下便于維護增加和修改操作都是在一個dialog上的

所以我們需要通過傳入一個參數(shù)來區(qū)分我們進行的是添加用戶還是修改用戶

修改用戶還得向子組件傳入咱們表格那一行的數(shù)據(jù)

所以咱們簡化一下

如果是添加用戶就傳一個字符串

如果是修改用戶就傳一個對象過去

思路清晰開始操作?。。?/p>

1.父組件的修改

在添加用戶按鈕上修改如下

  <el-button type="primary" @click="handlerDialog('添加用戶')"
      >添加用戶
      </el-button>

修改按鈕這里就要用到自己的表格數(shù)據(jù)了

  <template #default="{ row }" v-else-if="item.prop==='action'">
     <el-button type="primary" @click="handlerDialog(row)" :icon="Edit"/>
 </template>

解釋一下這里是elementplus的表格的自定義列有疑惑的可以參考官網(wǎng)文檔

然后在修改點擊事件handlerDialog

 const handlerDialog = (row) => {
 
    if(row==='添加用戶'){
      dialogTitile.value = "添加用戶"
      dialogTableValue.value = {}
    }else{
      dialogTitile.value = "修改用戶"
      console.log(row)
      dialogTableValue.value = JSON.parse(JSON.stringify(row))
 
    }
    dialogFormVisible.value = true
  }

說明一下 JSON.stringify() 系列化對象

系列化對象說白了就是把對象的類型轉(zhuǎn)換為字符串類型

最后發(fā)現(xiàn)這里給子組件是傳入了倆個參數(shù)

所以我們要去給父組件綁定上

  <test v-model="dialogFormVisible"
        v-if="dialogFormVisible"
        :dialogTitile="dialogTitile"
        :dialogTableValue="dialogTableValue"
  />

2.子組件的修改

父組件給子組件需要一個插件

??defineProps：父組件給子組件傳值

加入以下方法別忘了導入defineProps

 import {  defineProps } from 'vue' 
//接受父組件的值
  const props = defineProps({
    dialogTitile: {
      type: String,
      default: '',
      required: true
    },
    dialogTableValue:{
      type:Object,
      default: ()=>{},
    }
 
  })

這個時候添加用戶的操作已經(jīng)完成了

修改用戶這塊父組件已經(jīng)傳過來值了接下來開始賦值操作

3.父組件給子組件賦值

??這時候需要一個監(jiān)聽

所以我們要導入一個watch

import { watch } from 'vue'
watch(()=>props.dialogTableValue,()=>{
   form.value = props.dialogTableValue.value
},{deep:true,immediate:true})

props是我們創(chuàng)建出來的實例在defineProps那一塊

form.value = props.dialogTableValue.value 是將我們父組件的dialogTableValue傳給form對象

這時候再去測試以下已經(jīng)沒問題了?。?！

父組件傳過來的值里面還有一個 dialogTitile

我們知道修改用戶的密碼話在實際中是不能修改的

所以咱們一不做二不休

只需要修改一下form表單加上一個v-if

<el-form-item label="密碼" :label-width="formLabelWidth" prop="password" v-if="dialogTitile==='添加用戶'">
        <el-input v-model="form.password" name="password" type="password" show-password/>
 </el-form-item>

4.子組件調(diào)用父組件方法

論異步咱們就要異步到底在添加用戶和修改用戶之后我們可以調(diào)用父組件的更新表格內(nèi)容的方法

在這里我是 initUserList 小伙伴就調(diào)用自己的就好了

所以最后修改dialog的提交按鈕如下

 const emits = defineEmits(['update:modelValue','initUserList']) 
 
const handleConfirm = () => {
    formref.value.validate(async (valid) => {
      if (valid) {
        props.dialogTitile==='添加用戶' ? await adduser(form.value) : await editUser(form.value)
        props.dialogTitile==='添加用戶' ? ElMessage.success("添加成功"):ElMessage.success("修改成功")
        emits('initUserList')
        handleClose()
      } else {
        props.dialogTitile==='添加用戶' ? ElMessage.error('"添加失敗'):ElMessage.success("修改失敗")
        return false
      }
    })
 
  }

完結(jié)撒花??????