javascript - Vue JS 非 prop 属性和禁用属性继承

Question

我已经阅读了 5 遍以上的文档，但仍然无法理解禁用属性继承的用途，也无法理解给出的示例。

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

父.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>

child .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，总数为 62。我完全理解。

但是，当涉及到禁用属性继承部分时，我假设它们指的是子组件。

“这种模式让你可以像使用原始 HTML 元素一样使用基本组件，而不必关心哪个元素实际上是它的根:”

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

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

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

谢谢你。

Answer 1

如果你把一个随机的 html 属性放到组件上，它就会出现在渲染的组件上。如果禁用继承，则不会。

<my-component dorkus="whatever"></my-component>

渲染时，可能会扩展为

<div dorkus="whatever"> ... stuff ... </div>

但是如果你设置 inheritAttrs: false ， 看起来像

<div> ... stuff ... </div>

这里的所有都是它的。
dorkus="whatever"仍然存储在 $attrs 对象中，如果我们想用它做其他事情。