$attrs与$listeners组件传值

最新推荐文章于 2022-06-27 20:06:58 发布
最新推荐文章于 2022-06-27 20:06:58 发布
阅读量313 收藏 1
点赞数 2
文章标签： css sass 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_ZCheng/article/details/121583233
版权

组件传值

  • 非props属性：父组件传入子组件属性，但子组件没有接收称为非props属性，非props属性默认会加到子组件标签最外层（inheritAttrs：true,如果是false就不放到标签最外层显示）

  • 所有的非props属性都可以通过$attrs收到

    • 应用： v-bind="$attrs" 将所有的非props属性绑定到相应标签，也可以用于组件

  • 所有组件上的方法绑定子组件都可以通过$listeners接收

    • 应用： v-on="$listeners" 将所有的方法又绑定到组件相应标签，也可以用于组件

Mr_TJ
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue为什么要谨慎使用$attrs与$listeners
01-19
前言 在 Vue 开发过程中，如遇到祖先组件需要传值到孙子组件时，需要在儿子组件接收 props ，然后再传递给孙子组件，通过使用 v-bind=$attrs 则会带来极大的便利，但同时也会有一些隐患在其中。 隐患 先来看一个例子： 父组件： { template: ` <div> <input type=text v-model=input placeholder=please input> <test test=test> </div> `, data() { return { input: '', test: '1111', };
vue组件传值之$attrs、$listeners
weixin_45805570的博客
05-02 2219
组件传值总结 props和emit：父子组件传值 provide和inject：父子组件或者爷孙组件传值 $parent,$root,$chidren:父子组件传值 vuex 事件总线(vue实例) $attrs、$listeners:父子组件传值 前5种可能大部人都知道，这篇文章主要对$attrs、$listener进行一个介绍。 $attrs、$listeners $attrs: 官方文档介绍：包含了父作用域不作为prop被识别（且获取）的attribute绑定（class和style除外）。当一个
vue中使用v-bind=“$attrs“进行多层组件的传值
热门推荐
simple5960的博客
06-07 2万+
有如下的嵌套关系 <grandfather> <father> <grandson> </grandson> </father> </grandfather> 比如说在grandfather中传给了father一些props grandfather.vue <div> <father name="test" age="18" hobby="badminiton" grade="3" .
组件传值之$attrs
weixin_40025677的博客
11-27 260
论vue组件传值之$attrs 当前为祖父组件,传值方式还是按照之前的传值方式一样。 <template> <div> <p>数字:{{ money }}</p> <p>城市:{{ city }}</p> <Test :city="city"></Test> </d...
VUE使用$attrs 与 $listeners二次封装Elemenu-ui组件（以弹窗el-dialog为例）
happy81997的博客
08-14 2412
element-ui提供了很多方便的UI组件，但是使用的时候，特别是频繁使用到一个模块时候，经常需要进行二次包装，比如弹窗，很多弹窗需要加一些确定，取消按钮需要一些固定的模板套路，这些都可以利用二次封装实现。 一、二次封装基本套路 1、实现二次封装功能的模板：子组件 <template> <el-dialog :visible.sync="visibleDialog"> <!--内容区域的默认插槽--> <slot></slo
Vue组件通信$attrs、$listeners实现原理解析
10-14
1. **组件传值**：当祖父组件向父亲组件传递数据，而这些数据需要进一步传递给孙子组件，并且孙子组件需要调用祖父组件的方法时，可以利用 `$attrs` 获取未声明的属性并使用 `$listeners` 传递事件监听器。...
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
12-28
在vue2.4以前，父组件向子组件传值用props；子组件不能直接更改父组件传入的值，需要通过$emit触发自定义事件，通知父组件改变后的值。比较繁琐，写法如下： //父组件 父组件传入子组件的值：{{name}} 子...
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
11-21
然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。 vm.$attrs 官方...
vue深层组件嵌套传值.md
07-26
在父组件A 里 引入了子组件B , 但同时B组件又是子组件C的父组件,C又是子组件D的父组件 那么, A组件分别向B ,C ,D传值是如何实现的? D组件又是如何分别向C B A 传值的
Vue组件传值 之 $attrs 和 $listeners
归小超博客
04-26 896
首先，我们先来看一下官方对$attrs 和 $listeners的解释： $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $list...
组件间传参的六种方法----------$attrs与$listeners
Q2159621453的博客
06-27 448
我定义了四个组件(包含关系如下) FatherDom.vue SonDom.vue SonChild.vue ChildChild.vue FatherDom.vue SonDom.vue SonChild.vue ChildChild.vue 父向子传递函数。子向父传递函数，写法相似， 不过需要$emit
vue 组件传值之 $attrs、$listeners
天空之上有座城
01-04 1436
vue 组件传值之 attrs、attrs、attrs、listeners vue的通信方法常用的有，父传子 props， 子传父 通过绑定@事件，子组件$emit 传值，也可以父组件给子组件props传递一个函数，子组件调用函数，利用参数传值。 其他的还有vuex集中状态管理，eventBus也就是事件的全局$emit, $on 来抛发事件传值 以及接下来的attrs、attrs、attrs、...
$attr与$listeners的学习
m0_46360310的博客
08-15 1867
$ attrs和$ listeners是跨多层次组件传值的一种方式。 $attrs 用来继承上级组件的属性 不包括在当前组件里面定义的props属性，也就是说如果用了$attrs的组件里，用props接受了属性之后，该属性就不再向下传递了 $listeners 用来监听。$emit发送来的自定义事件，以及属性。 根组件 <template> <div> <fieldset> <legend>Root</legend> {{ for
$attrs与$listeners使用
小林的博客
02-07 316
在vue中使用父子组件通信的的时候，人们肯定会想到props,$emit 假如有A组件B组件和C组件 关系为：A组件是B组件的父组件，B组件是C组件的父组件， 如果A组件要跟C组件通信，可能的操作是，A往B传值，B再往A传值；C往B传值，B再往A传值 都得通过B这一程，这样子做也不是不行，但是耦合度太高了，不便于维护，代码可读性也不好。 我们可以$attrs与$listeners来解决这个问题 A组件 <template> <div class="hello"> A组件:
vue高频面试题
cxz
09-22 474
1.为什么data是个函数并且返回一个对象呢？ data之所以只一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。 2.组件之间的传值方式有哪些？ 父组件传值给子组件，子组件使用props进行接收 子组件传值给父组件，子组件使用$emit+事件对父组件进行传值 组件中可以使用$ parent和$children获取到父组件实例和子组件实例，进而获取数据 使用$ attrs和$ listeners，在对一些组件进行二次封装时可以
vue传值与$attrs
qq_41430522的博客
02-21 210
传值看这个https://www.cnblogs.com/barryzhang/p/10566515.html但是他$attrs的部分不是太好 这个https://www.jianshu.com/p/f7fa47499b39$attrs的部分写的还可以, A B C三个组件 父子 子父传值 假如A传值给B,B传值给C,虽然是同一个值,但是这样冒号传,props接的很麻烦, 爷孙 孙爷传值 ($listenter感觉像是子爷传值)所以用$attrs,他的作用是,比如A传了name,sex给B...
$attrs实现组件间传值
w18789476022的博客
04-08 224
$attrs实现组件间传值 1.目标：在ShopRating.vue中存在从vuex中获取的评分值，现在需要根据评分值实现对Star组件里星星个数的控制。 2. 评分控制星星个数的思想： starNum(score) { let fullStar = ""; let empityFullStar = 0; fullStar= parseInt(score); // 判断分数的小数部分是否小于5： <=5 小数部分被去除 ..
vue 组件传值(一）$attrs,$listeners
qq_40891322的博客
11-26 209
vue 组件传值(一）$attrs,$listeners $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$liste
Vue v2.4中新增的$attrs及$listeners属性使用
wk964269669的博客
08-29 890
原文地址：https://www.jb51.net/article/132371.htm 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的.
vue3 多层组件的传值与监听
最新发布
01-23
在Vue 3中，多层组件之间的值传递和监听可以通过以下几种方式实现： 1. props和emit：在父组件中使用props将数据传递给子组件，在子组件中使用$emit触发一个自定义事件，再在父组件中使用v-on监听该事件并处理。这样就可以实现父子组件之间的双向数据传递和监听。 2. provide和inject：在父组件中使用provide提供数据，然后在子组件中使用inject来注入该数据。这种方式可以实现跨层级的组件之间的数据传递，而不需要一层层地传递props。 3. ref和reactive：通过ref和reactive可以创建响应式的数据，然后将这些数据传递给多层组件中。父组件可以将数据通过props传递给子组件，子组件可以直接修改这些数据，然后父组件会自动响应数据的改变。 4. $attrs和$listeners：这两个新的特性可以简化多层组件之间的传值和监听。$attrs可以让子组件接收父组件中没有被props捕获的属性，$listeners可以将父组件中的事件监听自动绑定到子组件上。 总的来说，Vue 3提供了多种方式来实现多层组件之间的传值和监听，开发者可以根据具体场景选择合适的方式，灵活运用这些特性来提高开发效率和代码可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值