vue attr,vue3 $attrs
本文主要介绍了vue$attrs的综合分析使用，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
$attrs vue的用法下面是一个使用$ attrs的例子：1。父组件(Father.vue)2。子组件(Child.vue)3。孙儿组件(孙儿. vue)$ attrs到底是什么？我们来看看官方文件中给出的定义。
$attrs的使用vue
在vue 2.40版本之上增加了$attrs。项目中有多层组件可以使用$attrs传递参数，这样可以让代码更美观、更简洁、更方便维护。如果用普通的父子组件传递prop和$emit，$on会比较繁琐；如果用vuex，那就大材小用了。只在这些组件中使用，所以不需要使用Vuex使用了eventBus eventbus，如果使用不当，事件可能会执行多次。如果props没有接收到传递给组件的数据，它将被用作组件的HTML元素的属性，这些元素被绑定到组件的HTML根元素。inheritAttrs: false表示不希望这个组件的根元素继承父组件的属性，父组件传递的属性(子组件的props没有接收到属性)，不会显示在子组件的dom元素上，但是可以通过它的$attrs获取未使用的注册属性。inheritAttrs: false是不会影响样式和类的绑定。
以下是$attrs的使用示例
父组件的列表行数据传递给孙子组件展示
1.父组件（Father.vue）
将数据与子组件相关联。如果props没有接收到子组件，这些数据将作为通用HTML特性应用到子组件的根元素。
模板
差异
el-table :data=list
El-表格-列
prop=name
Label= name
/El-表格-列
El-表格-列
学习
Label=“研究对象”
/El-表格-列
El-表格-列标签=操作
模板槽-范围=“范围”
El-button @ click= transmitclick(scope . row) pass/El-button
/模板
/El-表格-列
/el-table
！-子组件-
儿童视图
:is-show=isOpen
:row=row
/ChildView
/div
/模板
脚本
从导入ChildView。/Child.vue
导出默认值{
组件：{ ChildView }，
data() {
返回{
isOpen:假，
第行：{}，
列表：[
{姓名：王力，学习： Java}，
{名称：喜欢，学习： Python}
]
}
},
方法：{
//传递事件
transmitClick(row) {
this.isOpen=true
this.row=row
}
}
}
/脚本
2.儿子组件（Child.vue）
中间层作为父组件和孙组件之间的传输中介，将v-bind=$attrs 添加到子组件中的孙组件，以便孙组件可以接收数据。
模板
div class=子视图
p组件/p
孙v-bind= $ attrs /孙
/div
/模板
脚本
从导入孙代。/孙儿. vue
导出默认值{
//继承所有父组件的内容
继承人：没错，
组件：{孙}，
data() {
返回{
}
}
}
/脚本
style lang=stylus 。子视图{
边距：20像素
边框：2px纯红
填充：20px
}
/风格
3.孙子组件（GrandChild.vue）
确保在孙子组件中使用props来接收从父组件传递的数据。
模板
div class=grand-child-view
Pgrandson组件/p
p数据传递到子组件：{{row.name}} {{row.name！==未定义？学习: }} {{row.study}}/p
/div
/模板
脚本
导出默认值{
//不想继承所有父组件的内容，同时不显示组件根元素dom上的属性。
inheritantrs:false，
//在这个组件中，需要接收父组件传递过来的数据。请注意，props中的参数名称不能更改，它们必须与从父组件传递的参数名称相同。
道具：{
isShow: {
类型：布尔型，
错误
},
第行：{
类型：对象，
de default:()={ }
}
}
}
/脚本
style lang=stylus 。孙子视图{
边框：2px纯绿色
填充：20px
边距：20像素
}
/风格
结果：
如上所述，如果props没有接收到传递给子组件的数据，该数据将被用作子组件的特征，并且这些特征被绑定到组件的HTML根元素。在vue2.40版本之后，这些特征是否显示在dom元素上可以通过inheritAttrs=false来控制。
例如，在案例中，父组件传递给子组件的row和isShow并没有被使用props的子组件接收到，这两个数据直接作为HTML的特殊属性。
子组件使用inheritAttrs=true，则属性显示在dom上；如果设置为false，则属性不会显示在dom上。
$attrs到底是什么？
先来看看官方文档给的定义
在父范围中包含未被识别(和获取)为正确的属性绑定(类和样式除外)。当一个组件没有声明任何prop时，它会包含所有父作用域(除了class和style)的绑定，可以通过v-bind=$attrs 传入内部组件3354。这在创建高级组件时非常有用。
既然来了，继续往下看！
既然关系到组件之间的数据传输，就不多说了，直接上栗子：
div id=应用程序
家长：{{msg}}
子组件v-bind:msg= msg /子组件
/div
让vm=new Vue({
埃尔： #app ，
数据：{
消息：“baseDom”
},
//使用道具接收
组件：{
子组件:
道具：[
“味精”
],
模板：` divSon:孙子组件v-bind:msg= msg /孙子组件/div `，
组件：{
孙子组件:
道具：[
“味精”
],
模板：` div sun:{ { msg } }/div ` 1
}
}
}
}
})
在根组件中调用son-component，绑定变量msg在根组件数据中；这时，味精；可以通过在子组件中定义props来接收；然后在子组件中定义孙子组件组件，绑定msg；此时，孙子-组件可以接收msg通过定义道具来定义子组件；仔细翻看组件代码，发现msg只在子组件组件中起传输作用；有没有其他解决值冗余的方法？不问，只问；让vm=new Vue({
埃尔： #app ，
数据：{
消息：“baseDom”
},
//使用$attrs接收
组件：{
子组件:
//道具：[
//消息
//],
模板：` divSon:孙子组件v-bind= $ attrs /孙子组件/div `，
组件：{
孙子组件:
道具：[
“味精”
],
模板：` div sun:{ { msg } }/div ` 1
}
}
}
}
})
起初，味精；子组件中不再接收根组件的；子组件组件调用孙子组件组件并绑定主角$ attrs即根成分msg可以接收；总结：多级组件传递值时，调用目标组件绑定$attrs直接获取根组件传递的参数，而不是由每一级组件逐层传递。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。