vue多层组件监听 v-bind=“$attrs“，v-on=“$listeners“

10月前作者：初心w50t2 分类：Toy博客阅读(48) 违法举报

这篇具有很好参考价值的文章主要介绍了vue多层组件监听 v-bind=“$attrs“，v-on=“$listeners“。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

高层级向低层级传值 v-bind=“$attrs”

v-bind="$attrs"主要用于高层组件向低层组件隔代传值。

假如有父组件A，子组件B，孙组件C 三个组件。

A组件中的值需要直接传给C组件，那么就需要在B组件中设置v-bind=“$attrs”，然后在A组件中传值，在C组件中用prop接收，这样就可以把值从A组件传到C组件。

低层级向高层级传值 v-on=“$listeners”

v-on="$listeners"主要用于低层组件向高层组件隔代传值。

还是有父组件A，子组件B，孙组件C 三个组件。

如果是C想向A传递信息，传统方式就需要C先emit给B，B再emit给A，这种方式比较麻烦。

这时候就可以在B组件使用v-on=“$listeners” ，这时候C组件就可以直接使用emit把事件和参数传递到A组件。文章来源地址https://www.toymoban.com/news/detail-819037.html

到了这里，关于vue多层组件监听 v-bind=“$attrs“，v-on=“$listeners“的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

2、简单上手+el挂载点+v-xx(v-text、v-html、v-on、v-show、v-if、v-bind、v-for)

vue3：https://cn.vuejs.org/ vue2：https://v2.cn.vuejs.org/v2/guide/ 流程：导入开发版本的Vue.js 创建Vue实例对象，设置el属性和data属性。使用简洁的模板语法把数据渲染到页面上示例： Vue实例的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的后代元素。是否可以设置其他的

2024年02月13日
浏览(43)
解决uniapp编译的微信小程序不支持v-bind=“$attrs“

原生组件无法支持v-bind;用户自定义组件以及第三方扩展组件才支持v-bind v-model属性在高版本的vue3+vite中使用父组件传递下来的props中的某一个属性，作为当前组件的子组件的v-model入参，那么将会报错 [vite] [plugin:vite:vue] v-model cannot be used on a prop, because local prop bindings are not wr

2024年02月08日
浏览(93)
[Vue] CSS中的v-bind

在 Vue 中说到 v-bind 大多数时候都是想到 template 中动态绑定 script 中的响应式数据。但其实在单文件组件(SFC)中， style 标签内也可以使用 v-bind 函数绑定数据。如上图第18行代码，使用 v-bind(color) 绑定了数据。当数据变化时，css样式随之变化：原理：（截取自Vue官方文档）

2024年02月19日
浏览(35)
Vue基础 - v-bind修改属性

div id=\\\"app\\\" label for=\\\"r1\\\"修改颜色/labelinput type=\\\"checkbox\\\" v-model=\\\"use\\\" id=\\\"r1\\\" brbr div v-bind:class=\\\"{\\\'class1\\\': use}\\\" !--如果use为true，则{\\\'class1\\\': use}=class1，否则为空-- v-bind:class 指令 /div /div script new Vue({ el: \\\'#app\\\', data:{ use: false //这里赋值为false，所以没有调用class1 } }); /script

2024年01月23日
浏览(61)
五、vue基础-指令之v-bind

前面要讲的一系列指令，主要是将值插入到模板内容中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性；绑定属性我们使用v-bind: 缩写：冒号（:）预期：any(with argument) | Object(without

2024年02月08日
浏览(46)
vue 简单实验 v-bind 变量与html属性绑定

1.代码 2.运行结果

2024年02月11日
浏览(40)
vue v-on 艾特@

vue v-on 内联代码：运行效果 methods方法带参数演示

2024年02月10日
浏览(39)
vue中v-bind和v-model的区别

v-bind 和 v-model 是Vue.js中的两个常用指令，它们在功能和用途上有一些区别。 v-bind 指令（或简写为 : ）用于动态绑定数据到HTML属性 (不是双向的)。它允许您将Vue实例的数据绑定到HTML元素的属性上，并根据数据的变化动态更新属性的值。可以使用 v-bind 指令来实现属性的动态

2024年02月13日
浏览(37)
vue 简单实验 v-on html事件绑定

1.代码 2.运行结果

2024年02月11日
浏览(36)
Vue中v-on的基础用法、参数传递和修饰符

目录一、v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click。方法一般是需要写方法名加上()，在@click中可以省掉，如上述的加。二、v-on的参数传递三、v-on的修饰词 .stop的使用，btn的click事件不会传播，不会冒泡到上

2024年02月11日
浏览(43)