快捷導(dǎo)航

vue3中使用ref和emit來(lái)減少props的使用示例詳解

更新時(shí)間：2022年06月21日 11:24:21 作者：@我不認(rèn)識(shí)你

現(xiàn)在在開(kāi)發(fā)vue3項(xiàng)目的過(guò)程中，我們開(kāi)發(fā)小組漸漸的減少props的使用，轉(zhuǎn)而用ref 和 emit 來(lái)代替，這篇文章主要介紹了vue3中使用ref和emit來(lái)減少props的使用,需要的朋友可以參考下

前言

在之前開(kāi)發(fā)vue2項(xiàng)目中，props 屬性在組件中經(jīng)常使用來(lái)進(jìn)行組件通信。現(xiàn)在在開(kāi)發(fā)vue3項(xiàng)目的過(guò)程中，我們開(kāi)發(fā)小組漸漸的減少props的使用，轉(zhuǎn)而用ref 和 emit 來(lái)代替。缺點(diǎn)不太清楚，但是好處還是挺多的。下面結(jié)合實(shí)際的開(kāi)發(fā)常見(jiàn)來(lái)舉例。

示例

示例1

以彈窗組件來(lái)說(shuō)，之前vue2時(shí)是通過(guò)props屬性來(lái)控制彈窗的打開(kāi)，比如下面這個(gè)新增彈窗退貨的彈窗組件（大多數(shù)清空下，新增和修改一般是一個(gè)組件）

<add-return-goods :visible.sync="openEdit" :detail="rowData" :title="editTitle" @addSuccess="getTableInfo"></add-return-goods>

visible 用來(lái)控制彈窗的顯示隱藏
detail 當(dāng)點(diǎn)擊修改時(shí)，用來(lái)向組件傳參
title 彈窗的標(biāo)題，同時(shí)也可以用來(lái)區(qū)分是新增彈窗還是，修改彈窗

第一個(gè)問(wèn)題就是屬性多了就不容易管理，而且需要定義許多變量來(lái)作為參數(shù)。第二個(gè)問(wèn)題就拿新增和修改來(lái)說(shuō)，組件內(nèi)部要通過(guò)監(jiān)聽(tīng)title來(lái)判斷當(dāng)前是新增還是修改，讓后來(lái)執(zhí)行不同的操作。

ref的優(yōu)點(diǎn)，在vue3，setup語(yǔ)法糖中，vue提供了defineExpose來(lái)向外暴露屬性和方法。針對(duì)上面的問(wèn)題，只需要向外暴露一個(gè)新增方法和一個(gè)修改方法，修改和修改時(shí)只需要使用不同的方法即可。這樣就不再需要定義多余的變量，也不需要進(jìn)行監(jiān)聽(tīng)

示例2

關(guān)于公共組件的開(kāi)發(fā)，比如有這樣一個(gè)彈窗組件

在這里插入圖片描述

如果使用props來(lái)進(jìn)行封裝的話(huà)，基本需要下面這些屬性：

url：保存時(shí)，需要請(qǐng)求的接口
params：參數(shù)（對(duì)象），保存時(shí)需要向后臺(tái)傳遞的參數(shù)
prop：屬性，因?yàn)闋顟B(tài)是可以修改的，所有需要一個(gè)屬性來(lái)進(jìn)行標(biāo)識(shí)，當(dāng)狀態(tài)改變后同步修改 params里面屬性的值

下面是借助ref和emit進(jìn)行的封裝

<template>
    <el-dialog v-model="status.dialogVisible" title="批量修改狀態(tài)" width="400px" :close-on-click-modal="false" draggable
        @close="closeDialog">
        <el-form :model="status.form" label-position="top">
            <el-form-item label="狀態(tài)選擇" prose="editStatus">
                <el-radio-group v-model="status.form.editStatus">
                    <el-radio :label="1">使用</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button type="primary" :loading="status.saveLoading" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
export default {
    name: 'batch-edit-state',
}
</script>

<script setup lang="ts">
import { reactive, defineExpose, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
import { BtUseAppStore } from 'beeboat-ui/es/core/store'
const appStore = BtUseAppStore()
const http = appStore.getHttp()

const emit = defineEmits(['save', 'saveSuccess'])

let status = reactive({
    form: {
        //修改狀態(tài)
        editStatus: 1,
    },
    dialogVisible: false,
    //保存加載
    saveLoading: false,
})

//打開(kāi)彈窗
let open = (value: number) => {
    if (![0, 1].includes(value)) {
        ElMessage.warning('狀態(tài)彈窗缺少入?yún)⒒騾?shù)值錯(cuò)誤!')
        return false
    }
    status.dialogVisible = true
    status.form.editStatus = value
}

//關(guān)閉彈窗
let closeDialog = () => {
    status.dialogVisible = false
    status.form.editStatus = 1
    status.saveLoading = false
}

//保存
let save = () => {
    status.saveLoading = true
    emit('save', status.form.editStatus, saveState)
}

//根據(jù)入?yún)?，調(diào)用保存接口
let saveState = (url: string, params: any) => {
    http.post(url, params)
        .then(() => {
            ElMessage.success('修改成功！')
            closeDialog()
            emit('saveSuccess')
        })
}

defineExpose({
    open,
})
</script>


<batch-edit-state ref="stateRef" @save="editStateSave" />
let editStateSave = (value: number, callback) => {
    callback(url,params)
}