vue3 $attrs,$attrs vue
这篇文章主要介绍了vue3美元属性和继承人的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
美元属性和继承人用法在父组件app.vue中子组件myInput.vue设置inheritAttrs: true(默认)子组件myInput.vue设置继承属性：false属性和继承人实例
$attrs和inheritAttrs用法
$attrs属性解释：包含了父作用域中不作为组件小道具或自定义事件的属性绑定和事件。当一个组件没有声明任何支柱时，这里会包含所有父作用域的绑定，并且可以通过v-bind=$attrs 传入内部组件——这在创建高阶的组件时会非常有用100 .继承权属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false可能不是很好理解，我们可以举个例子来验证一下。
在父组件app.vue中
模板
差异
MyInput type=text placeholder=输入用户名v-model=state.text /
我的输入类型=密码占位符=输入密码v-model=state.pass /
/div
/模板
脚本设置
从" @/components/myInput.vue "导入我的输入
从“vue”导入{反应性}；
恒定状态=反应({
文本： ,
通过： ,
});
/脚本
子组件 myInput.vue 设置 inheritAttrs: true（默认）
模板
div class=input
输入v-bind= $ attrs v-model=模型值/
/div
/模板
脚本
导出默认值{
道具：{
型号值：[字符串，数字],
},
};
/脚本
子组件 myInput.vue 设置 inheritAttrs: false
模板
div class=input
输入v-bind= $ attrs v-model=模型值/
/div
/模板
脚本
导出默认值{
继承者：假的，
道具：{
型号值：[字符串，数字],
},
};
/脚本
小结：
由上述例子可以看出，子组件的小道具中未注册父组件传递过来的属性。
当设置inheritAttrs:true时，子组件的顶层标签元素中会渲染出父组件传递过来的属性（例如：type=text 等)当设置inheritAttrs: false时，子组件的顶层标签元素中不会渲染出父组件传递过来的属性不管继承人为真实的或者假的，子组件中都能通过$attrs属性获取到父组件中传递过来的属性。
$attrs和inheritAttrs实例
官网的文档简短而又不清晰，实在是看不懂，只好自己找代码验证来看看是什么意思：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src= https://cdn。bootcdn。net/Ajax/libs/vue/3。1 .5/vue。全球。js /脚本
/头
身体
div id=应用程序
父亲：v1= 值1“”:v2=“”值2“”:v3=“”值3 /父亲
/div
/body
/html
脚本
const app=Vue.createApp({
data() {
返回{}
},
})
app.component(父亲,{
//inheritAttrs: false，
道具：[v1]，
模板：` divpv1是{{v1}}/p
son v-bind= $ attrs :some= 1 /son
/div `，
已创建(){
console.log(父亲：,这个$attrs)
}
})
app.component(son ，{
//inheritAttrs: false，
道具：[v2]，
模板：` divpv2是{{v2}}/p
孙子v-bind= $ attrs /孙子
/div `，
已创建(){
console.log(son:，这个$attrs)
}
})
app.component(孙子,{
道具：[v3]，
模板：` pv3是{{v3}}/p `，
已创建(){
console.log(孙子：,这个$attrs)
}
})
app。装载(应用数量)
/脚本
页面显示的结果：
第五颅神经的眼支是值一
v2是值2
v3是值3
页面源代码：
div id=app data-v-app=
div v2=值2“v3=”值3 !-这是父亲-
pv1是值1/p
div v3=value3 some=1 ！-这是儿子-
pv2是值2/p
p some=1v3是value3/p！-这是孙子-
/div
/div
/div
控制台打印是当前组件的$attrs:
父亲：代理{v2:值2 ，v3:值 3 ，_ _ v内部：1}
儿子：代理{v3:值3 ，一些：1，__vInternal: 1}
孙子：代理{some: 1，__vInternal: 1}
首先，传入三个值的父组件，但只有props实际接收的v1、v2和v3作为属性呈现在DOM中。
图中的devtool也可以解释，控制台也证明了这一点。
同一son组件仅接收v2作为属性：
孙子组件只接收v3作为道具。
父道具：v1，属性：v2，v3
子道具：v2，属性：v3，一些
孙子道具：v3，属性：一些
发现无论是父亲传入的三个值v1，v2，v3还是儿子传入的值： some=1 ，
只要不是通过prop传入下一个组件，就一定是下一个组件的$attrs，也就是没有作为prop使用的值会作为attrs的成员传入下一个组件。组件的属性是父组件和它自己的属性的组合。
上面是$attrs，所以inheritAttrs指的是attrs继承。这里的继承控制DOM渲染，不继承就不渲染，但是这个attrs其实是存在的。
inheritAttrs属性默认为真，所以可以看到上面的结论，Attrs会被传递下去。当设置为false时，从上一层继承的属性将不会在DOM中呈现。
修改代码：
app.component(父亲，{
InheritAttrs: false，//不继承
道具：[v1]，
模板：` divpv1是{{v1}}/p
son v-bind= $ attrs :some= 1 /son
/div `，
已创建(){
console.log(父亲：，这个。$attrs)
}
})
父组件不继承属性，控制台的打印没有改变：
父亲：代理{v2:值2 ，v3:值3 ，_ _ v内部：1}
son: Proxy {v3:值3 ，some: 1，__vInternal: 1}
孙子：代理{some: 1，__vInternal: 1}
Devtool，这里还能看到attrs。
但是看看源代码：
div id=app data-v-app=
div！-这是父亲-！-看看这条线-
pv1是值1/p
div v3=value3 some=1 ！-这是儿子-
pv2是值2/p
p some=1v3是value3/p！-这是孙子-
/div
/div
/div
DOM渲染中的V2和V3attrs已经不存在了。
所以综合总结一下：
$attrs是给一个组件传递一个值，不包括是道具的部分(比如父亲的v2，v3)，包含(class，id)inheritAttrs只是用来控制attrs是否在DOM中渲染。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。