Vue JS 非道具属性和禁用属性继承

Question

我已阅读文档超过 5 次，但我仍然不明白禁用属性继承的用途是什么，我不明白给出的示例。

我了解 props 的工作原理，它将数据从父组件传递到子组件。

父.vue

<template>
  <div id="app">
    <Child :num="num"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: {
   Child
  },
  data() {
    return {
      num: 42
    };
  }
};
</script>

儿童.vue

<template>
  <div>
    <h2>Child</h2>
    <h4>num is {{num}}</h4>
    <div id="total">
      <h4>total is {{total}}</h4>
    </div>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: {
    num: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {

    };
  },
  computed: {
    total() {
      return this.num + 20;
    }
  }
};
</script>

这将输出 num 为 42，total 为 62。我完全理解。

然而，当谈到禁用属性继承部分时，我假设它们是指子组件。

“这种模式允许您使用更像原始 HTML 元素的基本组件，而不必关心哪个元素实际上位于其根：”

这到底是什么意思？这是否意味着父母不必再将道具传递给孩子，孩子可以自动从其父母那里获取道具，这坦率地说没有意义，或者完全没有父组件，他们只使用子组件?

从他们的例子中， props: ['label' , 'value'] ，子组件如何接收这两个 props 而没有父组件将这些 props 传递给它们？

如果有人可以使用上面的 parent 和 vue 组件类比来提供一个简单的例子来说明这甚至意味着什么，我将非常感激。

谢谢你。

Answer 1

当您不希望将分配给组件的 html 属性传递给组件中的根元素时，可以使用禁用属性继承。

家长.vue

<template>
  <div id="app">
    <Child title="I am the child"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: {
   Child
  }
};
</script>

儿童.vue

<template>
  <div>
    <h2 v-bind="$attrs">Child</h2> <!-- This h2 will inherit all the html attributes -->
  </div>
</template>
<script>
export default {
  inheritAttrs: false, // This is what disables attribute inheritance
  name: "Child"
};
</script>

inheritAttrs: false防止根组件div继承分配给Child中组件的标题Parent.vue。

现在请注意我如何在inv-bind="$attrs"上使用。包含分配给根元素的所有属性。现在属性被分配给 ，而不是。h2Child.vue$attrsdivh2div

inheritAttrs: false不影响 props 或 vue 属性，它影响正常的 html 属性。（也不影响style和class属性）

基础组件

vuejs.org的文档中所说的“基本组件”是指按钮、输入等组件。

使用inheritAttrs: false对于输入组件确实很有用：

<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  </label>
</template>

<script>
export default {
  name: 'base-input',
  inheritAttrs: false,
  props: ['label', 'value'],
}
</script>

这允许您执行以下操作：

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

这意味着placeholder和required属性应用于input组件中的 ，而不是label。