vue3父組件和子組件如何傳值實(shí)例詳解
1.父組件打開子組件的的dialog組件
??新建一個(gè)vue文件命名為test
??然后咱們直接從官網(wǎng)CV一個(gè)帶有表單的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>
??父組件就只需要一個(gè)按鈕 然后加上咱們的點(diǎn)擊事件
<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>
然后這個(gè)時(shí)候發(fā)現(xiàn) 彈窗怎么點(diǎn)就是出不來
注意原因就是咱們的 dialogFormVisible.value值還沒傳給子組件 所以是打不開的
這個(gè)時(shí)候就要用到v-model進(jìn)行數(shù)據(jù)綁定
所以父組件要進(jìn)行修改 在test這里加上如下內(nèi)容
<test v-model="dialogFormVisible" v-if="dialogFormVisible"/>
同樣子組件也要修改 這里注意 是不能用v-model的 雖然官網(wǎng)的默認(rèn)自帶v-model
但我們要作為子組件的話 vue3子組件是不能用v-model和父組件進(jìn)行雙向綁定的
那該怎么實(shí)現(xiàn)父子組件進(jìn)行數(shù)據(jù)傳遞呢 咱們慢慢道來 咱們先實(shí)現(xiàn)父組件如何把dialogFormVisible的值傳給子組件
其實(shí)很簡(jiǎn)單 在官網(wǎng)給的文檔里面有這一行
model-value 單向數(shù)據(jù)綁定
直接拿來CV到咱們的子組件上去
<el-dialog :model-value="dialogFormVisible" title="Shipping address">
然后再去測(cè)試一下 可以了!?。?/p>
2.父組件關(guān)閉子組件的的dialog組件
點(diǎn)擊那個(gè)叉叉按鈕可以關(guān)閉dialog組件 但是點(diǎn)擊Cancel和Confirm按鈕毫無反應(yīng)
沒錯(cuò)就是子組件沒有傳值到父組件上面去 所以?。。?重點(diǎn)來了
??defineEmits
子組件向父組件事件傳遞
通俗點(diǎn)就是子組件可以調(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)閉的點(diǎ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"; //實(shí)例化defineEmits const emits = defineEmits(['update:modelValue']) //關(guān)閉的點(diǎ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>
然后再去試試 完美解決?。?!
3.開始運(yùn)用: 用戶的增加修改操作
這個(gè)想必并不陌生 一般情況下便于維護(hù) 增加和修改操作都是在一個(gè)dialog上的
所以我們需要通過傳入一個(gè)參數(shù)來區(qū)分我們進(jìn)行的是添加用戶還是修改用戶
修改用戶還得向子組件傳入咱們表格那一行的數(shù)據(jù)
所以咱們簡(jiǎn)化一下
如果是添加用戶 就傳一個(gè)字符串
如果是修改用戶 就傳一個(gè)對(duì)象過去
思路清晰 開始操作?。?!
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)文檔
然后在修改點(diǎn)擊事件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() 系列化對(duì)象
系列化對(duì)象說白了就是把對(duì)象的類型轉(zhuǎn)換為字符串類型
最后 發(fā)現(xiàn)這里給子組件是傳入了倆個(gè)參數(shù)
所以 我們要去給父組件綁定上
<test v-model="dialogFormVisible" v-if="dialogFormVisible" :dialogTitile="dialogTitile" :dialogTableValue="dialogTableValue" />
2.子組件的修改
父組件給子組件需要一個(gè)插件
??defineProps:父組件給子組件傳值
加入以下方法 別忘了導(dǎo)入defineProps
import { defineProps } from 'vue' //接受父組件的值 const props = defineProps({ dialogTitile: { type: String, default: '', required: true }, dialogTableValue:{ type:Object, default: ()=>{}, } })
這個(gè)時(shí)候添加用戶的操作已經(jīng)完成了
修改用戶這塊父組件已經(jīng)傳過來值了 接下來開始賦值操作
3.父組件給子組件賦值
??這時(shí)候需要一個(gè)監(jiān)聽
所以我們要導(dǎo)入一個(gè)watch
import { watch } from 'vue' watch(()=>props.dialogTableValue,()=>{ form.value = props.dialogTableValue.value },{deep:true,immediate:true})
props是我們創(chuàng)建出來的實(shí)例 在defineProps那一塊
form.value = props.dialogTableValue.value 是將我們父組件的dialogTableValue傳給form對(duì)象
這時(shí)候再去測(cè)試以下 已經(jīng)沒問題了?。?!
父組件傳過來的值里面還有一個(gè) dialogTitile
我們知道修改用戶的密碼話在實(shí)際中是不能修改的
所以咱們一不做二不休
只需要修改一下form表單 加上一個(gè)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é)撒花??????
總結(jié)
到此這篇關(guān)于vue3父組件和子組件如何傳值的文章就介紹到這了,更多相關(guān)vue3父組件和子組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue-cli3使用mock數(shù)據(jù)的方法分析
這篇文章主要介紹了vue-cli3使用mock數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了vue-cli3使用mock數(shù)據(jù)的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法
actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10VUE子組件向父組件傳值詳解(含傳多值及添加額外參數(shù)場(chǎng)景)
這篇文章主要給大家介紹了關(guān)于VUE子組件向父組件傳值(含傳多值及添加額外參數(shù)場(chǎng)景)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的方法詳解
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝,只需要將組件 verifition復(fù)制到所使用的components目錄下,本文給大家詳細(xì)講解,需要的朋友可以參考下2023-05-05