Use of VUE components ($children, $refs, $parent)

Source: Internet
Author: User
Tags xquery

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.