vue3 $attrs,vue attr
某视频剪辑软件组件之间的通信方式有很多种，props/emit，eventbus，vuex，provide/inject等，还有一种通信方式就是$attrs和$听众，下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$听众的相关资料，需要的朋友可以参考下
目录
美元属性听众总结
$attrs
$attrs用于多层次组件传递参数（组件标签的属性，类别和风格除外),爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈支柱识别，一旦被父辈支柱识别且获取，则孙子辈组件不能获取到该参数)
写法如下：(注：五绑定不能用简写：)
孙子v-bind=$attrs /
下面举个栗子：
爷爷（爷爷)向父亲（父亲)传递一个msg1
向孙子（孙子)传递一个msg2，孙子会一并接收msg1(然而被父亲接走了，所以孙子收不到msg1)
！爷爷，维
模板
差异
祖父：
父亲：msg1=msg1 :msg2=msg2 /
/div
/模板
脚本
从导入父亲/Father.vue
导出默认值{
组件：{父亲},
data() {
返回{
味精1:“味精1”，
味精2:“味精2”
}
}
}
/脚本
！-父亲，维-
模板
差异
父亲：{{ msg1 }}
孙子v-bind=$attrs /
/div
/模板
脚本
从导入孙子。/孙子。vue
导出默认值{
组件：{孙子},
道具：[msg1]
}
/脚本
！孙子
模板
差异孙子：{{ msg1 }}{{ msg2 }}/div
/模板
脚本
导出默认值{
道具：[msg1 ， msg2]
}
/脚本
界面现实结果：
祖父：
父亲：msg1
孙子：msg2
$listeners
$听众用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与$attrs不同，不存在半路被拦截的情况)
写法如下：(注：v-on不能用简写@,虽然不报错，但是也不生效)
孙子v-on=$listeners /
下面继续使用爷爷-父亲-孙子的栗子：
爷爷（爷爷)给父亲（父亲)绑定一个点击事件
父亲通过点击差异触发点击事件，同时向孙子（孙子)传递$听众
！爷爷，维
模板
差异
祖父：
父亲：msg 1= msg 1 :msg 2= msg 2 @ click= handle click /
/div
/模板
脚本
从导入父亲/Father.vue
导出默认值{
组件：{父亲},
data() {
返回{
味精1:“味精1”，
味精2:“味精2”
}
},
方法：{
handleClick() {
console.log(触发单击)
}
}
}
/脚本
！-父亲，维-
模板
差异
div @ click= handleFatherClick 父亲：{ { msg 1 } }/div
孙子v-bind= $ attrs v-on= $ listeners /
/div
/模板
脚本
从导入孙子。/孙子。vue
导出默认值{
组件：{孙子},
道具：[msg1]，
方法：{
handleFatherClick() {
console.log(父亲点击)
这个发出(点击)
}
}
}
/脚本
！孙子
模板
div @click=handleSonClick 孙子：{{ msg1 }}{{ msg2 }}/div
/模板
脚本
导出默认值{
道具：[msg1 ， msg2]，
方法：{
handleSonClick() {
console.log(孙子点击)
这个发出(点击)
}
}
}
/脚本
界面：
祖父：
父亲：msg1
孙子：msg2
点击父亲：msg1，控制台显示：
父亲点击
右咔嗒声
点击孙子：msg2，控制台显示：
孙子点击
右咔嗒声
总结
到此这篇关于vue2.x的$attrs和$听众的文章就介绍到这了，更多相关vue 2。x美元属性和$听众内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。