欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3父組件和子組件如何傳值實(shí)例詳解

 更新時(shí)間:2022年08月04日 09:26:54   作者:湘鍋鍋  
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2.x的父子組件之間的傳值并沒有太大的區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue3父組件和子組件如何傳值的相關(guān)資料,需要的朋友可以參考下

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)給的文檔里面有這一行

017acdcf82af423da863e2c5be538e96.png

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

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

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

然后再去測(cè)試一下 可以了!?。?/p>

d67fa7a2e4e34215a1863e1186045c42.png

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

b0778dd930864520baab9d7ae80d7250.png

點(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ù)的方法分析

    這篇文章主要介紹了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é)

    詳解mpvue開發(fā)小程序小總結(jié)

    這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能

    vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vuex新手進(jìn)階篇之a(chǎn)ctions的使用方法

    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)用

    淺談Vue的基本應(yīng)用

    本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價(jià)值,需要的朋友一起來看下吧
    2016-12-12
  • VUE子組件向父組件傳值詳解(含傳多值及添加額外參數(shù)場(chǎng)景)

    VUE子組件向父組件傳值詳解(含傳多值及添加額外參數(shù)場(chǎng)景)

    這篇文章主要給大家介紹了關(guān)于VUE子組件向父組件傳值(含傳多值及添加額外參數(shù)場(chǎng)景)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 使用?Vue3?實(shí)現(xiàn)文章目錄功能

    使用?Vue3?實(shí)現(xiàn)文章目錄功能

    本文給大家分享如何使用vue3實(shí)現(xiàn)文章目錄功能,特色功能主要是自動(dòng)高亮選中當(dāng)前正在閱讀的章節(jié),自動(dòng)展開當(dāng)前正在閱讀的章節(jié)的子標(biāo)題,并隱藏其他章節(jié)的子標(biāo)題,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧
    2022-03-03
  • vue中利用three.js實(shí)現(xiàn)全景圖的完整示例

    vue中利用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-12
  • VUE中鼠標(biāo)滾輪使div左右滾動(dòng)的方法詳解

    VUE中鼠標(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-12
  • vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解

    vue 行為驗(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

最新評(píng)論