vue3中使用ref和emit来减少props的使用示例详解

目录
  • 前言
  • 示例
    • 示例1
    • 示例2

前言

在之前开发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 方法的入参来进行修改的初始化
  • 当点击保存时,向父组件传递当前的状态,以及一个保存的回调函数。

到此这篇关于vue3中使用ref和emit来减少props的使用的文章就介绍到这了,更多相关vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue $emit $refs子父组件间方法的调用实例

    1.$emit 子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用"-"隔开 子组件: <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods:

  • vue中$refs, $emit, $on, $once, $off的使用详解

    1.$refs的使用场景 父组件调用子组件的方法,可以传递数据. 父组件: <div id="app"> <child-a ref="child"></child-a> <button @click="getMyEvent">点击父组件</button> <div> <script> import ChildA from './child.vue' export

  • vue之父子组件间通信实例讲解(props、$ref、$emit)

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

  • vue3中使用ref和emit来减少props的使用示例详解

    目录 前言 示例 示例1 示例2 前言 在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信.现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用ref 和 emit 来代替.缺点不太清楚,但是好处还是挺多的.下面结合实际的开发常见来举例. 示例 示例1 以弹窗组件来说,之前vue2时是通过props属性来控制弹窗的打开,比如下面这个新增弹窗退货的弹窗组件(大多数清空下,新增和修改一般是一个组件) <add-return-goods :visible

  • WebStorm中如何将自己的代码上传到github示例详解

    tips:我用的是2020.1版本的webstorm,2020.1以后的跟着操作没问题,其他版本的网上还有很多方法 第一步: 进入File-->Setting-->搜索git,如图,然后将此处的路径添加为Git安装目录中cmd中的git.exe,具体如图: 可以点击test测试,不报错则没问题 第二步,同样在刚才的搜索框搜索github,然后登录你的github账号,此处我的已经是登录了的,如图: 记得最后点击ok应用 第三步,根据截图步骤点击,最后跳出一个确认框,按提示文字操作: 以上就完成

  • vue3中的ref,toRef,toRefs三个的作用使用小结

    目录 1. ref的使用 2. toRef的使用 3. toRefs的使用 4.总结 1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变化. import { ref } from "vue"; let obj = { name: "你好", age: 16 }; let msg = ref(obj.name); co

  • Vue3中的ref和reactive响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • Vue3中的ref为何要用.value进行值的调用呢

    目录 Vue3中ref为何要用.value进行值的调用 Vue3 ref告别.value Ref 语法糖在项目中的使用 Vue3中ref为何要用.value进行值的调用 在Vue2中,所有的数据都通过一个Data进行统一的返回,并且在data中对某个组件要用的数据进行统一的管理,常见的使用形式是这样的: <template>   <div class="div">     <todos :Obj="tos" :removeObj=&qu

  • vue3中使用ref语法糖的示例代码

    自从引入组合式 API 的概念以来,一个主要的未解决的问题就是 ref 和响应式对象到底用哪个.响应式对象存在解构丢失响应性的问题,而 ref 需要到处使用 .value 则感觉很繁琐,并且在没有类型系统的帮助时很容易漏掉 .value 以上是官方原话,大概就是新的语法糖,可以让我们更方便的使用ref,而不用每次都写.value,大概就是把这样的代码,简化成这样 <script setup lang="ts"> import { ref } from 'vue' const

  • vue3中获取ref元素的几种方式总结

    目录 vue3获取ref元素方式 vue3中ref获取dom(包含for循环) 情况一:只是单纯的获取某个dom元素 情况二:在for循环中获取dom元素 情况三:获取ref中的ref vue3获取ref元素方式 1. 原生js获取dom元素: document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) 2. ref获取单个dom元素: <template

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

随机推荐