vue中用于什么的herentAttrs：false和$ attrs是什么？
Nik*_*ili 5 vue.js vue-component vuejs2
正如问题所暗示的，我无法弄清它们的含义以及为什么要使用它。据说可以使用它，以便当我们有很多组件并且想要将数据从父对象传递到孩子的孩子的孩子的组件时，我们不必使用道具。这是真的？
如果您能提供一个更简单的示例，那将是很好。Vue.js文档没有太多提及。
ber*_*nie 34
查看文档的“禁用属性继承”部分和完整详细信息的api 描述。
它的主要用途是定义传递属性的所谓“透明”组件。文档中给出的示例是一个包装input元素的组件：
// Component
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
// Usage
<base-input
v-model="username"
required
placeholder="Enter your username"
/>
然后将required和placeholder属性设置在input而不是包装上label。
它与组件的子组件的子组件没有任何关系，但可以在这样的层次结构中使用。
我希望这可以为您解决问题。
- @NikaKhurashvili 有点。它们在 `$attrs` 属性中可用，但它们*不是*实际的道具。道具可直接在组件上使用。例如，名为“myProp”的道具将通过`this.myProp` 在组件上可用。这不是属性的情况。道具用于实际数据，而属性则用于直接在模板的 html 中使用。 (3认同)
- v-bind="$attrs" 会告诉 vue 你想将提供给组件的 attrs 绑定到给定的标签。否则，它只会忽略未定义为 prop 的任何内容（因为您实际上会尝试将 attrs 绑定到实际未渲染的顶部 `<template>` 标记），请参阅：https://vuejs。 org/v2/api/#vm-attrs (2认同)
- @appu 在 Vue 3 中，“style”和“class”在“$attrs”上可用。当 `inheritAttrs: false` 时，它们也仅适用于带有 `v-bind="$attrs"` 的组件，而不适用于组件的根元素。 (2认同)
对我来说，谈论$attrs和inheritAttrs在一起，让我更难理解。所以我会展示更多的观察结果。
我将从 HTML 中调用我的 base-inp，如下所示
<base-inp label="Username:" v-model="username"
required placeholder="Enter your username"></base-inp>
base-inp 的 HTML 如下所示
<label>
{{ label }}
<input v-bind="$attrs" :value="value" @input="$emit('input', $event.target.value)" />
</label>
v-bind="$attrs"用于绑定属性。
如果您设置v-bind="$attrs"和inheritAttrs: true（默认）并渲染您的 base-inp 组件。它将呈现
所以基本上我们正在传递输入到 HTML 模板中的 base-inp 组件中的属性。并且还进入base-inp 内的“输入”。您可以在“标签”和“输入”中看到“占位符”。
如果我们删除v-bind="$attrs"，占位符将不再是内部“输入”中的属性
如果设置v-bind="$attrs"和inheritAttrs: false，您将看到属性不在根元素（标签）上，而是在内部输入上。
| 归档时间： |
|
| 查看次数： |
3302 次 |
| 最近记录： |