简单聊聊vue2.x的$attrs和$listeners

2024-04-02 19:04:59 590人浏览泡泡鱼

摘要

目录$attrs$listeners总结$attrs $attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数

$attrs

$attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈prop识别，一旦被父辈prop识别且获取，则孙子辈组件不能获取到该参数）

写法如下：（注：v-bind不能用简写 :）

<grand-son v-bind="$attrs" />

下面举个栗子：

爷爷（GrandFather）向父亲（Father）传递一个 msg1

向孙子（GrandSon）传递一个 msg2，孙子会一并接收 msg1（然而被父亲接走了，所以孙子收不到 msg1）

<!-- GrandFather.Vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  }
}
</script>

<!-- Father.vue -->
<template>
  <div>
    Father: {{ msg1 }}
    <grand-son v-bind="$attrs" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1']
}
</script>

<!-- GrandSon.vue -->
<template>
  <div>GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2']
}
</script>

界面现实结果：

GrandFather:
Father: msg1
GrandSon: msg2

$listeners

$listeners 用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与 $attrs 不同，不存在半路被拦截的情况）

写法如下：（注：v-on 不能用简写 @，虽然不报错，但是也不生效）

<grand-son v-on="$listeners" />

下面继续使用爷爷-> 父亲 -> 孙子的栗子：

爷爷（GrandFather）给父亲（Father）绑定一个 click 事件

父亲通过点击 div 触发 click 事件，同时向孙子（GrandSon）传递 $listeners

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" @click="handleClick" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  },
  methods: {
    handleClick() {
      console.log('trriger click')
    }
  }
}
</script>

<!-- Father.vue -->
<template>
  <div>
    <div @click="handleFatherClick">Father: {{ msg1 }}</div>
    <grand-son v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1'],
  methods: {
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }
  }
}
</script>

<!-- GrandSon.vue -->
<template>
  <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2'],
  methods: {
    handleSonClick() {
      console.log('grandson click')
      this.$emit('click')
    }
  }
}
</script>

界面：

GrandFather:
Father: msg1
GrandSon: msg2

点击 Father: msg1，控制台显示：

father click
trriger click

点击 GrandSon: msg2，控制台显示：

grandson click
trriger click

总结

到此这篇关于vue2.x的$attrs和$listeners的文章就介绍到这了,更多相关vue2.x $attrs和$listeners内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 简单聊聊vue2.x的$attrs和$listeners

本文链接: https://lsjlt.com/news/141967.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

简单聊聊vue2.x的$attrs和$listeners

目录$attrs$listeners总结$attrs $attrs 用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数...

99+

2024-04-02
简单聊聊PyTorch里面的torch.nn.Parameter()

在刷官方Tutorial的时候发现了一个用法self.v = torch.nn.Parameter(torch.FloatTensor(hidden_size)),看了官方教程里面的...

99+

2024-04-02
聊聊Springboot2.x的session和cookie有效期

目录Springboot2.x的session和cookie有效期背景项目问题解释最后解决办法为升级springboot2.x踩过的坑——跨域导致session问题什么是跨域?...

99+

2024-04-02
简单聊聊Python中的wraps修饰

在了解wraps修饰器之前，我们首先要了解partial和update_wrapper这两个函数，因为在wraps的代码中，用到了这两个函数。 partial 首先说partial函数，在官方文档的描述中，这个函数的声明如下：...

99+

2023-01-31

简单 Python wraps
简单聊一聊SQL中的union和union all

目录概念基础语法使用技巧区别总结概念 mysql UNION 操作符用于连接两个以上的 SELECT 语句的结果组合到一个结果集合中。多个 SELECT 语句会删除重复的数据。 UNION 操作符...

99+

2023-02-22

sql中union和union all区别 sql中的union和union all sql中union all的用法
简单聊一聊SQL中的union和union all

目录概念基础语法使用技巧区别总结概念 MySQL UNION 操作符用于连接两个以上的 SELECT 语句的结果组合到一个结果集合中。多个 SELECT 语句会删除重...

99+

2023-02-22

sql中union和union all区别 sql中的union和union all sql中union all的用法
简单聊一聊vue中data的代理和监听

目录假设现在有一个data需求一: 用 Object.defineProperty 定义 n需求二：n不能小于0所以就有了需求三：不暴露data中可以设置的属性，而是使用一个代理因此...

99+

2024-04-02
简单聊聊vue3.0 sfc中setup的变化

目录前言标准的sfc写法 script-setup 变量暴露组件挂载props 自定义事件总结前言在vue中，sfc(单文件组件)指的是文件后缀名为.vue的特殊文件格式，它允许...

99+

2024-04-02
简单聊聊Vue中的ref,toRef与toRefs

目录一、ref二、toRef三、torefs一、ref ref 函数，可以把简单数据类型包裹为响应式数据（复杂类型也可以），注意 JS 中操作值的时候，需要加 .value 属性，模...

99+

2023-05-14

Vue ref toRef toRefs使用 Vue ref toRef toRefs Vue ref Vue toRef Vue toRefs
简单聊一聊Go语言中的数组和切片

目录1. 数组2. 切片（Slice）append 函数总结1. 数组数组是一个由固定长度的特定类型元素组成的序列，一个数组可以由零个或多个元素组成。因为数组的长度是固定的，因此...

99+

2024-04-02
简单聊聊JavaScript的事件循环机制

目录前言概念举个栗子TIP再次举个栗子总结前言 JavaScript是一门单线程的弱类型语言，但是我们在开发中，经常会遇到一些需要异步或者等待的处理操作。类似ajax，亦或者ES6...

99+

2024-04-02
简单聊聊Java程序中的换行符

目录常见的换行符\r\n和\n的区别换行符的解析小结常见的换行符 Java程序中的换行符一般使用“\n”表示，它是一个转义字符，表示换行符。根据操作系统的不同...

99+

2023-03-21

Java 换行符使用 Java换行符
简单聊聊Vue中的计算属性和属性侦听

目录1. 计算属性语法: 1.简写方式:语法: 2.完整写法: 2. 监视（侦听）属性 1. 监视属性watch：2. 深度监视3. 区别和原则总结1. 计算...

99+

2024-04-02
简单聊聊Python中的鸭子类型和猴子补丁

目录前言鸭子类型猴子补丁总结前言 Python 开发者可能都听说过鸭子类型和猴子补丁这两个词，即使没听过，也大概率写过相关的代码，只不过并不了解其背后的技术要点是这两个词而已。我最...

99+

2024-04-02
简单聊聊Js中的常见错误类型

目录前言JavaScript中的错误类型ErrorEvalErrorRangeErrorReferenceErrorSyntaxErrorTypeErrorURIError总结前言 ...

99+

2024-04-02
简单聊聊Go for range中容易踩的坑

目录前言1. for+传值2. for+传址3.for+闭包4. for+goroutine总结前言为了让大家更好的理解本期知识点，先介绍以下几个知识点：线性结构、非线性结构、循环...

99+

2023-03-20

Go for range踩坑 Go for range
简单聊一聊redis过期时间的问题

目录1.多次修改一个Redis的String过期键，如何保证他仍然能保留第一次设置时的删除时间2.修改hash、set、Zset、list的值，会使过期时间重置吗？总结1.多次修改一个redis的String过期键，如何...

99+

2023-04-14

redis 过期时间 redis 过期时间 java redis设置过期时间
简单聊聊C++中回调函数的实现

目录前言1 函数指针2 C风格的回调函数3 C++风格的回调函数4 多态类型的回调函数5 通过function和bind实现回调函数功能6 总结前言回调函数其实和普通函数一样，不同...

99+

2024-04-02
简单聊聊工作中常用的Java Lambda表达式

目录前言1. list转map2. filter()过滤3. foreach遍历4. groupingBy分组5. sorted+Comparator 排序6.distinct去重7...

99+

2022-11-13

Java Lambda表达式 Java Lambda
python简单的多人聊天室

刚开始学习python，写了一个聊天室练练手。 Server.py import socket,select,thread; host=socket.gethostname() port=5963 addr=(host,port) ...

99+

2023-01-31

聊天室简单 python