vue3父組件和子組件如何傳值實(shí)例詳解
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>??父組件就只需要一個按鈕 然后加上咱們的點(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>然后這個時候發(fā)現(xiàn) 彈窗怎么點(diǎn)就是出不來
注意原因就是咱們的 dialogFormVisible.value值還沒傳給子組件 所以是打不開的
這個時候就要用到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í)很簡單 在官網(wǎng)給的文檔里面有這一行
model-value 單向數(shù)據(jù)綁定
直接拿來CV到咱們的子組件上去
<el-dialog :model-value="dialogFormVisible" title="Shipping address">
然后再去測試一下 可以了?。。?/p>
2.父組件關(guān)閉子組件的的dialog組件
點(diǎn)擊那個叉叉按鈕可以關(guān)閉dialog組件 但是點(diǎn)擊Cancel和Confirm按鈕毫無反應(yīng)
沒錯就是子組件沒有傳值到父組件上面去 所以?。。?重點(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)用： 用戶的增加修改操作
這個想必并不陌生 一般情況下便于維護(hù) 增加和修改操作都是在一個dialog上的
所以我們需要通過傳入一個參數(shù)來區(qū)分我們進(jìn)行的是添加用戶還是修改用戶
修改用戶還得向子組件傳入咱們表格那一行的數(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)文檔
然后在修改點(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() 系列化對象
系列化對象說白了就是把對象的類型轉(zhuǎn)換為字符串類型
最后 發(fā)現(xiàn)這里給子組件是傳入了倆個參數(shù)
所以 我們要去給父組件綁定上
<test v-model="dialogFormVisible"
v-if="dialogFormVisible"
:dialogTitile="dialogTitile"
:dialogTableValue="dialogTableValue"
/>2.子組件的修改
父組件給子組件需要一個插件
??defineProps：父組件給子組件傳值
加入以下方法 別忘了導(dǎo)入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)聽
所以我們要導(dǎo)入一個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對象
這時候再去測試以下 已經(jīng)沒問題了?。。?/p>
父組件傳過來的值里面還有一個 dialogTitile
我們知道修改用戶的密碼話在實(shí)際中是不能修改的
所以咱們一不做二不休
只需要修改一下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é)撒花??????
總結(jié)
到此這篇關(guān)于vue3父組件和子組件如何傳值的文章就介紹到這了,更多相關(guān)vue3父組件和子組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(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-03
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法
actions用來處理mutations中的異步操作,觸發(fā)mutations中的函數(shù),下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
VUE子組件向父組件傳值詳解（含傳多值及添加額外參數(shù)場景）
這篇文章主要給大家介紹了關(guān)于VUE子組件向父組件傳值（含傳多值及添加額外參數(shù)場景）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文給大家分享如何使用vue3實(shí)現(xiàn)文章目錄功能，特色功能主要是自動高亮選中當(dāng)前正在閱讀的章節(jié)，自動展開當(dāng)前正在閱讀的章節(jié)的子標(biāo)題，并隱藏其他章節(jié)的子標(biāo)題，代碼簡單易懂，感興趣的朋友跟隨小編一起看看吧2022-03-03
vue中利用three.js實(shí)現(xiàn)全景圖的完整示例
這篇文章主要給大家介紹了關(guān)于vue中利用three.js實(shí)現(xiàn)全景圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要給大家介紹了關(guān)于VUE中鼠標(biāo)滾輪使div左右滾動的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue 行為驗(yàn)證碼之滑動驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05