vue.js - Vue 中使用的 inheritAttrs: false 和 $attrs 是什么？

Question

正如问题所暗示的那样，我无法弄清楚它们的含义以及为什么要使用它。据说可以这样使用，当我们有很多组件，并且我们想将数据从父组件传递到子组件的子组件时，我们就不必使用道具了。这是真的？

如果您能提供一个更简单的示例，那就太好了。Vue.js 文档没有提及太多。

标签： vue.jsvuejs2vue-component

Answer 1

查看文档的“禁用属性继承”部分和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"
/>

然后在而不是包装上设置requiredandplaceholder属性。inputlabel

它与组件的子级的子级没有任何关系，但它可以在这样的层次结构中使用。

我希望这能为你解决问题。