If the project is large and the components are many, how can we find the components we want accurately and quickly?
Reprint Http://www.tuicool.com/articles/73IRrem
1) $refs
First, your child components are labeled. Demo: <firstchild ref= "one" ></firstchild>
Then in the parent component, through this. $refs. One has access to the self-assembly, including data from its own component, and functions that call it
2) $children
He returns a collection of components, and if you can clearly know the order of the subcomponents, you can also use subscript to manipulate;
for (Let I=0;i<this. $children. length;i++) {
Console.log (this. $children [i].msg); MSG data for the output subcomponent;
}
Next, give a long deno.
First define a parent component: Parentcomponent,
In the parent component I used two self components (if there are 100 self components) [Clearly, the component can only have one root node], the root node is what, I do not know ...
<template id= "Parentcomponent" >
<div >
<p>this is a parent-component</p>
< FirstChild ref= "F1" ></firstchild>
<secondchild ref= "F2" ></secondchild>
< Button @click = ' show_child_of_parents ' >show child msg</button>
</div>
</template>
The definition of two-word component is given separately: (the 2nd one uses the template, and the 1th is script)
<script type= "Text/x-template" id= "Childone" >
<div>
<p>this is first child</p>
Use STOP to block default events (Vue's event handling mechanism)
<button @click. stop= ' getParent ' >get parent msg</button>
</div >
</script>
<template id= "childsec" >
<div>
<p>this is second child</ p>
</div>
</template>
The component template is defined by:
1) Hanging on elements:
<script> New Vue ({el: "#app", data:{}, components:{"Parent-component": {
Template: ' #parentcomponent ', data () {return{msg: ' This is the content of the parent component '}
}, methods:{show_child_of_parents () { Children mode access from component for (Let I=0;i<this. $children. length;i++) {Console.log
(this. $children [i].msg);
}//through $ref, Access subcomponent console.log (this. $refs. f1.msg);
this. $refs. F1.getparent ();
},}, components:{
' FirstChild ': {Template: ' #childOne ', data () {
return {msg: ' This is the first child component '};
}, methods:{getParent () {Let a=1;
Console.log (a);
Alert (this. $parent. msg);
}},}, ' Secondchild ': {
Template: ' #childSec ', data () {return {msg: "This is the second component"};
}
}
}
}
}
});
</script>
2) using the parent component
<body>
<p><strong> Child components of the parent component can be accessed through $refs </strong></p>
<div id= "App" >
<parent-component></parent-component>
</div>
</body>
It is noteworthy that vue2, compared to vue1, discarded something .... 、
Http://www.cnblogs.com/dupd/p/5904109.html
To summarize:
1) component can only be one root node
2) This can be used in the self-assembly $parent. Property value, or function
3) in the parent component, you can use this. $refs. The markup of the component to access the subcomponent, or the this. $children [i]. Properties, accessing the child component's
4) You need to be aware of the point of this
There is a picture to testify
2017-07-30
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
