How to define parent components and child components in Vue
topic description
how to distinguish and understand the relative relationship of Vue components (parent components and child components)
sources of topics and their own ideas
"Vue.js" practical
component accepts data from its parent through the pros attribute, so the current component is the relative child component, and it is the parent component that provides the data.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<div id="app">
<my-component message=""></my-component>
</div>
<script>
Vue.component("my-component",{
props:["message"],
template:`<div>{{message}}</div>`
})
var app=new Vue({
el:"-sharpapp"
})
</script>
what result do you expect? What is the error message actually seen?
props: ["message"], you can see here that message is the data of the parent component, so my-component is relatively a child component. The question is who is the parent component of my-component.
I was confused when I saw
< my-component message= "data from the parent component" > < / my-component >
. Message, isn"t this an attribute of my-component? How does it have anything to do with the parent component?
isn't the parent component app?
my understanding should be like this:
<div id="app">
<my-component :message="msg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template:`<div>{{message}}</div>`
})
var app=new Vue({
el:'-sharpapp',
data:{
msg:"Hello World!"
}
})
</script>
msg is the data from the parent component, where the parent component is the current instance of Vue app.
<div id="app">
<my-component :message="msg"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template:`<div>{{message}}</div>`
})
var app=new Vue({
el:'-sharpapp'
})
</script>
has also encountered this problem recently. I've thought about it for a while, but I don't know if it's right.
our narrow understanding is that div-sharpapp is the parent component, but can div-sharpapp and its HTML as a whole be regarded as the parent component?
[that is, the parent component is considered to be more than just an orphaned div element]
the globally registered child component my-component initializes and replaces the child elements in the parent component after obtaining the prop of the parent element.
[< my-component > is treated as a placeholder for the child component; it is the component that is registered. ]
which subcomponent uses this attribute to define on the placeholder of the component, which makes the component tree clearer (decoupling? To avoid mounting too many attributes on div-sharpapp
the parent component of your my-component here can be understood as a Vue instance. If you use vue-router, the parent component is generally router-view
< my-component message= "data from the parent component" > < / my-component >
the data from the parent component means that you can fill in the data from the parent component, that is, the data from the data in his parent component
.
message is the incoming props, and the function of state is similar. The example of
is not very good.-sharpapp is bound to the outermost Vue instance, and all the packages in this belong to its own components.
parent-child components are relative, not absolute.
for example, there are three vue components, a, b and c, a contains b and c, so b is both a child component of an and a parent component of c.
the data= "data1" passed into the a.vue is the props passed to the b.vue
analogy above you. The variable app is equivalent to the vue component in a.vue, and b is equivalent to the component my-component
.
// a.vue
<template>
aaaa
<vue-b data="data1"/>
</template>
// b.vue
<template>
bbbb
<vue-c data="data2"/>
</template>
// c.vue
<template>
cccc
</template>
