title: Vue JS Non prop attributes and Disabling Attribute Inheritance
body: <p>I have read the docs more than 5 times and I still can't understand what is Disabling Attribute Inheritance is used for and I don't understand the example given.</p>
  
  <p>I understand how props works, it is passing data from parent component to child component.</p>
  
  <p>Parent.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;Child :num="num"&gt;&lt;/Child&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Child from "@/components/Child";
  export default {
    name: "App",
    components: {
     Child
    },
    data() {
      return {
        num: 42
      };
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Child.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;Child&lt;/h2&gt;
      &lt;h4&gt;num is {{num}}&lt;/h4&gt;
      &lt;div id="total"&gt;
        &lt;h4&gt;total is {{total}}&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: "Child",
    props: {
      num: {
        type: Number,
        default: 100
      }
    },
    data() {
      return {
  
      };
    },
    computed: {
      total() {
        return this.num + 20;
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>This will output num is 42 and total is 62. Which I understand perfectly.</p>
  
  <p>However when it comes to Disabling Attribute Inheritance section , by base component, I assume they are referring to the child components.</p>
  
  <p><strong>"This pattern allows you to use base components more like raw HTML elements, without having to care about which element is actually at its root:"</strong> </p>
  
  <p>What does this even mean ? Does this mean that parent don't have to pass on props anymore to the child and the child can automatically pick up the props from it's parent which frankly doesn't make sense or there is no parent component altogether, they are only using child component? </p>
  
  <p>From their example, props: ['label' , 'value'] , how is the child component receiving these two props without the parent component passing these props to them?</p>
  
  <p>I would be very thankful if someone can use the parent and vue component analogy above to provide a simple example of what does this even mean.</p>
  
  <p>Thank you.</p>