vue3:使用ref和emit来减少props的使用

前言

在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信。现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用refemit 来代替。缺点不太清楚,但是好处还是挺多的。下面结合实际的开发常见来举例。

示例

示例1

以弹窗组件来说,之前vue2时是通过props属性来控制弹窗的打开,比如下面这个新增弹窗退货的弹窗组件(大多数清空下,新增和修改一般是一个组件)

<add-return-goods :visible.sync="openEdit" :detail="rowData" :title="editTitle" @addSuccess="getTableInfo"></add-return-goods>
  • visible 用来控制弹窗的显示隐藏
  • detail 当点击修改时,用来向组件传参
  • title 弹窗的标题,同时也可以用来区分是新增弹窗还是,修改弹窗

第一个问题就是属性多了就不容易管理,而且需要定义许多变量来作为参数。第二个问题就拿新增和修改来说,组件内部要通过监听title来判断当前是新增还是修改,让后来执行不同的操作。

ref的优点,在vue3,setup语法糖中,vue提供了defineExpose来向外暴露属性和方法。针对上面的问题,只需要向外暴露一个新增方法和一个修改方法,修改和修改时只需要使用不同的方法即可。这样就不再需要定义多余的变量,也不需要进行监听

示例2

关于公共组件的开发,比如有这样一个弹窗组件
在这里插入图片描述
如果使用props来进行封装的话,基本需要下面这些属性:

  • url:保存时,需要请求的接口
  • params:参数(对象),保存时需要向后台传递的参数
  • prop:属性,因为状态是可以修改的,所有需要一个属性来进行标识,当状态改变后同步修改 params里面属性的值

下面是借助refemit进行的封装

<template>
    <el-dialog v-model="status.dialogVisible" title="批量修改状态" width="400px" :close-on-click-modal="false" draggable
        @close="closeDialog">
        <el-form :model="status.form" label-position="top">
            <el-form-item label="状态选择" 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: {
        //修改状态
        editStatus: 1,
    },
    dialogVisible: false,
    //保存加载
    saveLoading: false,
})

//打开弹窗
let open = (value: number) => {
    if (![0, 1].includes(value)) {
        ElMessage.warning('状态弹窗缺少入参或参数值错误!')
        return false
    }
    status.dialogVisible = true
    status.form.editStatus = value
}

//关闭弹窗
let closeDialog = () => {
    status.dialogVisible = false
    status.form.editStatus = 1
    status.saveLoading = false
}

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

//根据入参,调用保存接口
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)
}
  • 向外暴露一个open方法用来打开弹窗,通过open 方法的入参来进行修改的初始化
  • 当点击保存时,向父组件传递当前的状态,以及一个保存的回调函数。
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue3中,props和emit仍然是非常重要的概念。它们被用于父子组件之间的数据通信和事件传递。 首先,让我们看看props。在Vue3中,props可以在组件声明中的setup函数中使用。你可以使用ref、reactive或者其他响应式对象来接收props。例如: ```javascript import { defineComponent, ref } from 'vue'; export default defineComponent({ props: { message: { type: String, required: true, }, }, setup(props) { const messageRef = ref(props.message); return { messageRef, }; }, }); ``` 在上面的例子中,我们定义了一个message的props,并且使用ref来接收它。接着,在组件中我们可以直接使用messageRef使用这个props。 接下来,让我们看看emit。emit用于从子组件向父组件派发事件。在Vue3中,你可以使用Vue的内置函数createApp来创建一个实例,然后使用$emit函数来派发事件。例如: ```javascript import { defineComponent, createApp } from 'vue'; export default defineComponent({ setup() { const handleClick = () => { createApp().config.globalProperties.$emit('my-event', 'some data'); }; return { handleClick, }; }, }); ``` 在上面的例子中,我们定义了一个handleClick函数,并且使用$emit来派发一个名为my-event的事件,并且传递了一些数据。 在父组件中,你可以使用v-on监听这个事件,并且执行一些操作。例如: ```html <template> <child-component @my-event="handleEvent"></child-component> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { handleEvent(data) { console.log(data); }, }, }; </script> ``` 在上面的例子中,我们使用v-on监听名为my-event的事件,并且在handleEvent函数中打印了传递过来的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无知的小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值