I have reviewed the documentation multiple times and still struggle to grasp the concept of Disabling Attribute Inheritance and the accompanying example.
My understanding of props is clear - it involves passing data from a parent component to a child component.
In Parent.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>
In 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>
The output will be num is 42 and total is 62, which I comprehend.
Regarding the section on Disabling Attribute Inheritance, when they mention the base component, I assume they are referring to the child components.
"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:"
This statement confuses me. Does it imply that the parent no longer needs to pass props to the child, and instead, the child can automatically inherit props from the parent even if there is no explicit parent-child relationship?
In their example with props: ['label' , 'value'], how does the child component receive these props without them being passed explicitly by the parent component?
If someone could provide a simple example using the analogy of parent and Vue components to explain this concept, I would greatly appreciate it.
Thank you.