浅谈 v-bind=“$props“、v-bind=“$attrs“、v-on=“$listeners“的关系用法

news/2024/7/10 0:23:27 标签: 前端, vue

父级A----->子级B----->孙级C 传值

目标是父级属性传递给孙级,解决A传B传C繁琐传值问题

方法一:使用 $attrs

父级A

<father name="张三" age="50" />

子级B 无需使用 Props 接收,它会把父级传递过来的name、age 都传给 孙级

在子级B里面引用孙级C <Sun v-bind="$attrs" />

在孙级C里使用Props 接收  props:['name','age']

方法二:使用 $props

不同在于要什么就拿什么,没有在子级B里接收则在孙级C就不会有!

需要在子级B里 接收 props:['name']

在孙级C里使用Props 接收  props:['name']

v-on="$listener 是接收孙级C方法事件

在孙级C里 使用 this.$emit('sendFun', '爷爷你好!')

在子级B里 的孙级组件 <Sun v-bind="$attrs"  v-on="$listeners"/>,子级B不再需要添加任务方法

在父级响应方法就可 <father name="张三" age="50" @sendFun="sendFun"></father>


http://www.niftyadmin.cn/n/5413996.html

相关文章

第十六天-爬虫selenium库

目录 1.介绍 2.使用 selenium 1.安装 2.使用 1.测试打开网页&#xff0c;抓取雷速体育日职乙信息 2.通过xpath查找 3.输入文本框内容 send_keys 4.点击事件 click 5.获取网页源码&#xff1a; 6.获取cookies 7.seleniumt提供元素定位方式&#xff1a;8种 8.控制浏览…

Spring Boot工程集成验证码生成与验证功能教程

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

通过Electron打包前端项目为exe

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;爱蹦跶的大A阿 &#x1f525;当前正在更新专栏&#xff1a;《JavaScript保姆级教程》、《VUE》、《Krpano》 ✨ 正文 1、 拉取electron官网上的demo&#xff0c;拉下来之后安装依赖&#xff0c;项目跑起来之后&#xff0c;就…

查询IP地址保障电商平台安全

随着电子商务的快速发展&#xff0c;网购已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;网络交易安全一直是人们关注的焦点之一&#xff0c;尤其是在面对日益频发的网络诈骗和欺诈行为时。为了提高网购平台交易的安全性&#xff0c;一种有效的方法是通过查询IP地址…

Vivado使用记录(未完待续)

一、Zynq开发流程 二、软件安装 三、软件使用 字体大小修改&#xff1a;Setting、Font 四、Vivado基本开发流程 1、创建工程 Quick Start 组包含有 Create Project&#xff08;创建工程&#xff09;、 Open Project&#xff08;打开工程&#xff09;、 Open Example Project&…

【软件工程】可用性测试:提升软件、网站与产品用户体验的关键环节

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 正文 关注点 界面设计&#xff1a; 导航测试&#xff1a; 交互测试&#xff1a; 易用性测试&#xff1a; 多平台兼容性&#xff1a; 我…

客户端向服务端传参5个方式

/** * get: parmas方式 例子&#xff1a;/:id * get: query方式 例子&#xff1a;/home?namexxx&agexxx * get: json方式 例子&#xff1a;{"name":"xxx","age":"xxx"} * post: x-www-form-urlencoded方式 例子: namexxx&age…

Python数据处理实战(5)-上万行log数据提取并分类进阶版

系列文章&#xff1a; 0、基本常用功能及其操作 1&#xff0c;20G文件&#xff0c;分类&#xff0c;放入不同文件&#xff0c;每个单独处理 2&#xff0c;数据的归类并处理 3&#xff0c;txt文件指定的数据处理并可视化作图 4&#xff0c;上万行log数据提取并作图进阶版 …