Home > Developer > JavaScript
Vue component $ children, $ refs, $ parent Usage Details, vuerefs
This article describes how to use the vue component $ children, $ refs, and $ parent. I will share it with you and take a note.
If the project is large and there are many components, how can we find the components we want accurately and quickly ??
1) $ refs
First, you can mark the child components. Demo: <firstchild ref = "one"> </firstchild>
Then, in the parent component, you can access this self-component through this. $ refs. one, including accessing data in the data of the Self-component, and calling its function.
2) $ children
The returned component is a set of components. If you can clearly know the sequence of child components, you can also use Subscripts for operations;
For (let I = 0; I <this. $ children. length; I ++) {console. log (this. $ children [I]. msg); Output msg data of sub-components ;}
Next we will give a longer deno
First define a parent component: parentcomponent,
In the parent component, I used two self-components (if there are one hundred self-components) [specifically, the component can only have one root node]. What is the root node, I don't 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>
Define two word components: (2nd use template and 1st use script)
<Script type = "text/x-template" id = "childOne"> <div> <p> this is first child </p> // use stop to block default events (vue event Processing Mechanism) <button @ click. stop = 'getparent'> get parent msg </button> </div> </script> <template id = "childSec"> <div> <p> this is second child </p> </div> </template>
After the component template is defined, the following code is used:
1) hanging element:
<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 method to access the self-component for (let I = 0; I <this. $ children. length; I ++) {console. log (this. $ children [I]. msg);} // mark through $ ref to access the console of the sub-component. 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) The parent component is used.
<Body> <p> <strong> you can use $ refs to access child components of the parent component </strong> </p> <div id = "app"> <parent-component> </parent-component> </div> </body>
It is worth noting that vue2 discards some things compared to vue1 .... Http://www.bkjia.com/article/93467.htm
Summary:
1) A component can only have one root node.
2) The attribute value of this. $ parent. Or function can be used in the self-component.
3) in the parent component, you can use the mark of this. $ refs. component to access the child component, or this. $ children [I]. attribute to access the child component's
4) You need to note the point of this
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
