Vue组件通讯$attrs和$listeners例子

在Vue中,$attrs 和 $listeners 是两个非常有用的特性,它们允许你更轻松地实现组件间的通讯,特别是当你需要创建可复用的组件时。

$attrs 包含了父组件中未被子组件声明的属性 (class 和 style 除外)。当你不想在子组件中逐个声明父组件传递的属性时,你可以使用 v-bind="$attrs" 一次性地将它们传入子组件。

$listeners 包含了父组件中(不含 .native 修饰器的)v-on 事件监听器。子组件可以用 v-on="$listeners" 将事件监听器指向到内部元素上。

下面是一个使用 $attrs 和 $listeners 的例子:

父组件 (Parent.vue)

vue

<template>

  <div>

    <ChildComponent

      :name="name"

      :age="age"

      @click="handleClick"

      @custom-event="handleCustomEvent"

    />

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  data() {

    return {

      name: 'John Doe',

      age: 30

    };

  },

  methods: {

    handleClick() {

      console.log('Clicked on the child component!');

    },

    handleCustomEvent(payload) {

      console.log('Received custom event:', payload);

    }

  }

};

</script>

子组件 (ChildComponent.vue)

vue

<template>

  <div>

    <p>Name: {{ name }}</p>

    <p>Age: {{ age }}</p>

    <button @click="triggerCustomEvent">Trigger Custom Event</button>

    <!-- 使用 $attrs 传递未声明的属性 -->

    <input v-bind="$attrs" />

  </div>

</template>

<script>

export default {

  props: ['name', 'age'],

  methods: {

    triggerCustomEvent() {

      // 触发自定义事件

      this.$emit('custom-event', { message: 'Hello from Child' });

    }

  },

  mounted() {

    // 假设你需要在子组件内部监听一些事件

    // 你也可以使用 $listeners 来监听

    // 但在这个例子中,我们直接在模板上使用了 v-on

    // 如果你想在子组件的某个内部元素上监听这些事件,你可以使用 v-on="$listeners"

  }

};

</script>

在这个例子中,Parent.vue 传递了两个属性 name 和 age,以及两个事件监听器 @click 和 @custom-event 到 ChildComponent.vue。在 ChildComponent.vue 中,我们声明了 name 和 age 作为 props,并使用 v-bind="$attrs" 将未声明的属性绑定到 <input> 元素上。虽然我们没有在子组件中声明 click 事件监听器,但由于我们使用了 v-on="$listeners"(在这个例子中我们并没有显式使用它,但在需要时可以使用),子组件仍然可以响应父组件传递的点击事件。

注意,在Vue 3中,$attrs 和 $listeners 的行为有一些变化,但基本概念和用法是相似的。在Vue 3中,你可能需要使用 <slot v-bind="$attrs"> 而不是 v-bind="$attrs" 直接在子组件的根元素上,因为Vue 3鼓励使用插槽来分发内容。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/18456.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在豆包这事上,字节看得很明白

大数据产业创新服务媒体 ——聚焦数据 改变商业 导语&#xff1a; 1.基于豆包的话炉/猫箱APP市场反响一般 2.价格战对于豆包来说是副产物 3.价格战对大模型市场是良性的 4.豆包接下来会推广至国际社会 因为宣称价格比行业便宜99.3%&#xff0c;豆包成功出圈了。根据火山引擎公…

笔试强训week6

day1 Q1 难度⭐⭐ 小红的口罩_牛客小白月赛41 (nowcoder.com) 题目&#xff1a; 疫情来了&#xff0c;小红网购了 n 个口罩。 众所周知&#xff0c;戴口罩是很不舒服的。小红每个口罩戴一天的初始不舒适度为 ai​。 小红有时候会将口罩重复使用&#xff08;注&#xff1a;…

【Linux】数据链路层协议+ICMP协议+NAT技术

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Linux 目录 &#x1f449;&#x1f3fb;数据链路层&#x1f449;&#x1f3fb;以太网以太网帧格式网卡Mac地址对比ip地址 &#x1f449;&#x1f3fb;MTUMTU…

gtest的使用和简单例子

首先需要安装gtest的库&#xff0c;命令如下&#xff1a; git clone https://github.com/google/googletest.git cd googletest mkdir build cd build cmake .. sudo make install后续就可以直接包含gtest头文件进行测试了。 这里给出一个测试的简单例子&#xff0c;这里使用…

温度传感器安装热套管介绍

热套管&#xff08;Thermowell&#xff09;是一段末端封闭的金属管&#xff0c;主要通过焊接、螺纹或法兰连接的方式安装到过程容器或管线上&#xff0c;可保护温度传感器免受流致应力、高压和腐蚀性化学品等严苛工况的影响。此外&#xff0c;热套管使传感器可以轻松方便地拆下…

介绍图片懒加载的几种实现方法

在 JavaScript 中&#xff0c;懒加载&#xff08;Lazy Loading&#xff09;主要用于延迟加载资源&#xff0c;例如图片、视频、音频、脚本等&#xff0c;直到它们真正需要时才加载。这样可以提高页面的加载速度和性能。 以下是几种常见的 JavaScript 懒加载实现方式&#xff1…

【管理咨询宝藏116】某大型国有集团公司战略落地保障方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏116】某大型国有集团公司战略落地保障方案 【格式】PDF版本 【关键词】战略落地、大型国企、战略报告 【核心观点】 - 资产规模以提高资产质量、…

第三部分:领域驱动设计之通过重构得到更深层的理解

通过重构得到更深层的理解 通过重构得到更深层的理解是一个涉及很多方面的过程。有三件事情是必须要关注的: 以领域为本;用一种不同的方式来看待事物;始终坚持与领域专家对话。 开始重构 获得深层理解的重构可能出现在很多方面。一开始有可能是为了解决代码中的问题——一段…

Linux的线程状态

在Linux中,每个进程都有一个当前的状态,这个状态用于标识进程当前正在做什么。你可以通过ps命令配合不同的选项来查看进程的状态。以下是常见的进程状态及其含义: R (running or runnable): 进程正在运行或在运行队列中等待运行。这并不是说进程正在CPU上执行,而是说它处于…

项目十三:搜狗——python爬虫实战案例

根据文章项目十二&#xff1a;简单的python基础爬虫训练-CSDN博客的简单应用&#xff0c;这一次来升级我们的技术&#xff0c;那么继续往下看&#xff0c;希望对技术有好运。 还是老样子&#xff0c;按流程走&#xff0c;一条龙服务&#xff0c;嘿嘿。 第一步&#xff1a;导入…

华为诺亚等发布MagicDrive3D:自动驾驶街景中任意视图渲染的可控3D生成

文章链接&#xff1a;https://arxiv.org/pdf/2405.14475 项目链接&#xff1a;https://flymin.github.io/magicdrive3d 虽然可控生成模型在图像和视频方面取得了显著成功&#xff0c;但在自动驾驶等无限场景中&#xff0c;高质量的3D场景生成模型仍然发展不足&#xff0c;主…

Neo4J中构建的知识图谱,如何使用推理算法

在Neo4j中构建的知识图谱中&#xff0c;推理算法的使用可以极大地增强数据分析和洞察能力。Neo4j提供了多种推理和查询工具&#xff0c;主要通过Cypher查询语言和内置的图算法库来实现。以下是几种常见的推理算法和使用场景&#xff1a; 1. 规则推理&#xff08;Rule-based Re…

2951. 找出峰值 Easy

给你一个下标从 0 开始的数组 mountain 。你的任务是找出数组 mountain 中的所有 峰值。 以数组形式返回给定数组中 峰值 的下标&#xff0c;顺序不限 。 注意&#xff1a; 峰值 是指一个严格大于其相邻元素的元素。 数组的第一个和最后一个元素 不 是峰值。 示例 1&#xf…

关于宏的理解

关于宏的理解&#xff0c; 用宏函数举例 宏会把我们的内容编程一段代码&#xff0c;但是我们宏用的一切都不是变量&#xff0c;就是一个构建代码的符号。 比如下面的例子 char str1[] "1234"; const char* str2 "1234"; char st3[5] { 1,2,3,4,\0 };…

Linux网络编程:应用层协议|HTTP

前言&#xff1a; 我们知道OSI模型上层分为应用层、会话层和表示层&#xff0c;我们接下来要讲的是主流的应用层协议HTTP&#xff0c;为什么需要这个协议呢&#xff0c;因为在应用层由于操作系统的不同、开发人员使用的语言类型不同&#xff0c;当我们在传输结构化数据时&…

【全开源】宇鹿家政系统(FastAdmin+ThinkPHP+原生微信小程序)

&#xff1a;助力家政行业数字化升级 一、引言&#xff1a;家政服务的新篇章 随着移动互联网的普及和人们生活水平的提高&#xff0c;家政服务的需求日益增长。为了满足这一市场需求&#xff0c;并推动家政行业的数字化升级&#xff0c;我们特别推出了家政小程序系统源码。这…

excel 点击单元格的内容 跳转到其他sheet设置

如图点击1处跳转到2 按照如下图步骤操作即可

oracle 分区表常用语句(2)

给分区表增加分区 第一种不存在MAXVALUE(直接添加即可&#xff09; ALTER TABLE T6 ADD PARTITION P5 VALUES LESS THAN(TO_DATE( 2018-08-01 00:00:00, SYYYY-MM-DD HH24:MI:SS, NLS_CALENDARGREGORIAN));第二种存在MAXVALUE alter table T6 split PARTITION P4 at(TO_DAT…

电机控制系列模块解析(25)—— 过压抑制与欠压抑制

一、概念解析 变频器作为一种重要的电机驱动装置&#xff0c;其内置的保护功能对于确保系统安全、稳定运行至关重要。以下是关于变频器过压抑制、欠压抑制&#xff08;晃电抑制&#xff09;、发电功率限制、电动功率限制等保护功能的详细说明&#xff1a; 过压抑制 过压抑制是…

Android Audio基础——缓冲区大小获取(十三)

前面使用 AudioTrack 播放音频数据,在创建 AudioTrack 时其中有一个是缓冲区大小的参数,通过 AudioTrack.getMinBufferSize() 获取最小缓冲区。这一节我们就来分析下缓冲区大小参数的作用。 一、最小缓冲区 最小缓冲区是声音能正常播放的最低保障。如果数据缓冲区分配得过小…