Vue3中emits与attrs的区别分析

目录
  • 结论
  • 实践分析
  • 扩展
  • 总结

结论

当在父组件自定义事件，若没有在子组件中声明时，将自动绑定在父组件的$attrs上；而当在子组件声明时，则不会在父组件的$attrs上出现

实践分析

为了验证emits和attrs的区别，我们构造这样的组件结构

<div>
<com-one-vue/>
</div>
<div>
<com-one-vue/>
</div>

其具体的Vue文件及代码为(注意，以下语法均采用 setup语法糖 )：

App.vue

<template>
<div>
组件1（加上fun事件，但不在emits中声明）
<com-one-vue @fun = 'call'/>
</div>
<div>
组件1（加上fun2事件，在emits中声明）
<com-one-vue @fun2 = 'call'/>
</div>
</template>
​
<script setup>
import { provide, ref } from '@vue/runtime-core';
import comOneVue from './components/comOne.vue';
import comTwoVue from './components/comTwo.vue';
import comThreeVue from './components/comThree.vue';
const call = () => {
  console.log('xx')
}
</script>

comOne.vue

<template>
    <button @click="f">heihei</button>
</template>
​
<script setup>
import {useAttrs } from "@vue/runtime-core";
const emits = defineEmits(['fun2'])
const {onFun} = useAttrs()
const f = () => {
    if(onFun)
    onFun()
    emits('fun2')
}
console.log(useAttrs())
</script>

那么此时，打开控制台，我们可以发现：

在两个组件1中，由于第一个组件1的自定义方法fun没有在emits中声明，所以在其的$attrs上出现了onFun，其类型是一个方法。

而在第二个的组件1上,我们定义了自定义方法fun2，由于在一开始我们已经在子组件中定义了fun2，所以在第二个组件1上没有将fun2添加到$attrs上。

注意，这里虽然这两个组件都是组件1，但是其的自定义事件是不会互相影响的，这也是fun自定义方法没有出现在第二个组件1上的$attrs上的原因。

同时，我们点击两个按钮，可以发现，fun和fun2方法都打印出了结果

所以，在这种情况下，这两种用法带来的效果是没有什么不同的。

扩展

通过刚才的Demo，我们了解了emits和attrs的用法差异和一些细节，但是在多数情况下，其实两者的功能是没有差异的，那么我们应该如何使用呢？

首先，emits是首先在子组件声明，父组件引用，而attrs则是先由父组件在子组件上自定义事件，子组件通过查看父组件的attrs来使用。这样的差异让我们可以根据一个事件的使用方式和特点来决定使用哪种方法：

  • 当一个组件经常需要通过自定义事件和父组件通信时，可以使用emits
  • 当一个父组件可能需要通过自定义事件和子组件通讯且并不是经常时，可以使用attrs。但是注意，由于父组件可能不会通过自定义事件和子组件通信，所以需要判断是否存在相应的attrs（不判断会出现undefined的错误）

再来看一下官方对这两种用法的看法：

强烈建议使用 emits 记录每个组件所触发的所有事件。
这尤为重要，因为我们移除了 .native 修饰符。任何未在 emits 中声明的事件监听器都会被算入组件的 $attrs，并将默认绑定到组件的根节点上。

在Vue3中，移除.native修饰符后，所有的事件其实都会记录在都组件的attrs上，无论是不是自定义组件。如下：

所以，如果需要区分自己的自定义事件和原生事件，最好还是使用emits来定义每一个组件触发的事件。同时，其实所有的事件，只要不在emits中声明，都会默认绑定在父组件的attrs上，并不仅限于自定义的事件。

总结

到此这篇关于Vue3中emits与attrs区别的文章就介绍到这了,更多相关Vue3中emits与attrs区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中通过使用$attrs实现组件之间的数据传递功能

    组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用. 一般有三种方式: props vuex Vue Event Bus 本文介绍的是使用$attrs的方式. 这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs 这个api是在2.4版本中添加的,那么为什么要添加这个特性呢? 看看官网是怎么解释的 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class  和  style  除外

  • Vue vm.$attrs使用场景详解

    1.vm.$attrs简介 首先我们来看下vue官方对vm.$attrs的介绍: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件--在创建更高层次的组件时非常有用. 猛一看有点看不明白.... 2.场景介绍 vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件

  • Vue为什么要谨慎使用$attrs与$listeners

    前言 在 Vue 开发过程中,如遇到祖先组件需要传值到孙子组件时,需要在儿子组件接收 props ,然后再传递给孙子组件,通过使用 v-bind="$attrs" 则会带来极大的便利,但同时也会有一些隐患在其中. 隐患 先来看一个例子: 父组件: { template: ` <div> <input type="text" v-model="input" placeholder="please input"&

  • Vue3中emits与attrs的区别分析

    Vue3中emits与attrs的区别分析

    目录 结论 实践分析 扩展 总结 结论 当在父组件自定义事件,若没有在子组件中声明时,将自动绑定在父组件的$attrs上:而当在子组件声明时,则不会在父组件的$attrs上出现 实践分析 为了验证emits和attrs的区别,我们构造这样的组件结构 <div> <com-one-vue/> </div> <div> <com-one-vue/> </div> 其具体的Vue文件及代码为(注意,以下语法均采用 setup语法糖 ): A

  • jQuery中.attr()和.data()的区别分析

    $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q

  • C#中Write()和WriteLine()的区别分析

    Write()和WriteLine()都是System.Console提供的方法,两着主要用来将输出流由指定的输出装置(默认为屏幕)显示出来. 两着间的差异在 Console.WriteLine()方法是将要输出的字符串与换行控制字符一起输出,当次语句执行完毕时,光标会移到目前输出字符串的下一行. 至于Console.Write()方法,光标会停在输出字符串的最后一个字符后,不会移动到下一行. Write()和WriteLine()区别 都是System.Console提供的方法 都是在屏幕显示

  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    作用:创建一个ref对象,其value值指向另外一个对象中的某个属性.这样在模板中就可以直接使用属性名而不用麻烦的再加对象名前缀了. 语法: const name = toRef(person,'name') 应用:要将响应式对象中的某个属性单独提供给外部使用时. 扩展:toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs(person) 示例: toRef <template> <span>{{pe

  • vue3 中ref和reactive的区别讲解

    1. ref和reactive区别:    如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value    如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的    Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,    如果是就自动添加.value, 如果不是就不自动添加.value 3. Vue是如何判断当前的数据是否是ref类型的   

  • Jquery中offset()和position()的区别分析

    本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

  • asp.net中virtual和abstract的区别分析

    本文实例分析了asp.net中virtual和abstract的区别,分享给大家供大家参考.具体分析如下: 一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰方法.virtual的使用会有两种情况: 情况1:在基类中定义了virtual方法,但在派生类中没有重写该虚方法.那么在对派生类实例的调用中,该虚方法使用的是基类定义的方法. 情况2:在基类中定义了virtual方法,然后在派生类中使用override重写该方法.那么在对派生类实例的调用中,该虚方法使用的是派生重写的方

  • php进行支付宝开发中return_url和notify_url的区别分析

    本文实例分析了php进行支付宝开发中return_url和notify_url的区别.分享给大家供大家参考.具体分析如下: 在支付宝处理业务中return_url,notify_url是返回些什么状态呢,我们要根据它来做一些处理就必须了解return_url,notify_url的区别,下面我就来给大家介绍介绍. 问题描述: 我在处理支付宝业务中出现过这样的问题,付费完成后,在支付宝跳转到商家指定页面时,订单状态已经更新,通过调试发现是支付宝先通知notify_url,完成了订单状态. 支付宝r

  • PHP中addslashes与mysql_escape_string的区别分析

    本文实例分析了PHP中addslashes与mysql_escape_string的区别.分享给大家供大家参考,具体如下: 1.在插入数据时两者的意义基本一样.区别只在于addslashes 在magic_quotes_sybase=on时将" '"转换成" ' '" 在magic_quotes_sybase=off时将" '"转换成"\ '" 而mysql_escape_string总是将" '"转换成&

  • Android Activity中onStart()和onResume()的区别分析

    本文分析了Android Activity中onStart()和onResume()的区别.分享给大家供大家参考,具体如下: 首先你要知道Activity的四种状态: ① Active/Runing 一个新 Activity 启动入栈后,它在屏幕最前端,处于栈的最顶端,此时它处于可见并可和用户交互的激活状态. ② Paused 当 Activity 被另一个透明或者 Dialog 样式的 Activity 覆盖时的状态.此时它依然与窗口管理器保持连接,系统继续维护其内部状态,所以它仍然可见,但它

随机推荐