Vue learning Day05-Vue communication between the components (parent to child, child to parent, between brothers)

-------------------- The following is the kind of communication is just beginning to learn vue component communication learning -------------- ----

The following are study notes:

1. The relationship between the components

One of the most powerful components vue.js, and component instance scope is independent of each other, which is the data between the various components can not be referenced to each other, in general, the components can have the following relationship:

As shown, A and B, B and C, B and D are paternity, C and D are brothers

2. parent component passes the data to the sub-assembly.

① data attributes and parent element subassembly binding

② attribute data of the sub-component binding by props store with the parent component.

① Bind
 <div the above mentioned id = "App"> 
<Child : dilevery <! - msg is the parent component of the data -> = "msg"> </ Child> 
</ div> 
------- 
② storage using 
components: { 
child: { 
Template: "<div> I subassembly received data I - {{}} dilevery </ div>",   

the props: [ "dilervery" ] 
}

3. The subassembly passes the data to the parent component.

Parent components ① a method (to pass over the data as a parameter), receive and process data in this method.

② subcomponents do bind a custom event and will provide the parent component method as an event handler

③ subassembly by $ emit ( "event sub-component binding", the Data) [often write $ emit () written in the sub-components inside a click event function in] the trigger event is bound to the sub-parts, and to be delivered data passed to the event data as arguments

<body> 
    <div ID = "App"> 
        <Child @ = Child-Event "the getMessage" > </ Child> <-! parent components is the getMessage method for processing data transmitted over the, child-event is sub component custom event -> 
    </ div> 
    <Script> 
        the let VM = new new Vue ({ 
            EL: "#app" , 
            Data: { 

            }, 
            Methods: { 
                the getMessage (Data) { 
                    the console.log (Data) 
                } 
            }, 
            Components: { 
                Child: { 
                    Template: ` <div>I was content to show the sub-assembly template
                         <button@ click = "fn" transmission data> </ the Button> 
                        </ div> `,                     Methods: { 
                        the Fn () { the this . $ emit (" Child-Event ", 18 ) // click event inside () is triggered with $ emit subassembly and custom event delivery Data 
                        } 
                    } 
                } 
            } 
        }) </ Script> 
</ body>

4. Brothers components (or any of its components can be used in the following way communications)

Vue 4.1 creates an empty instance, is a Bus (event bus) as a medium

4.2 data transfer who will come to use the bus. $ Emit (event name, data) to trigger an event bus bound

4.3 Who receives the data (received data is to handle a book, write business code), who use the bus. $ On (event name () => {}) Bind an event (often a custom event), and event function to write business code

<Script> 
        the let Bus = new new Vue () 
        Vue.component ( "Jack" , { 
            Template: ` <div> I jack, I give rose data transfer:
                 <Button @ = the Click" Fn " > Data transmission </ button > 
                </ div> `,             Methods: {
                 Fn () { 
                    . $ EMIT Bus ( " Love "," I Love you " ) 
                } 
            }, 
        }) 
        Vue.component ( " Rose " , { 
            Template:` <div> I is a rose, the data I receive is:
                {{msg}}</div>`,


                            data(){
                return{
                    msg:""
                }
            },
            created () {
                bus.$on("love",data=>{
                    //console.log("jack要说的话是,"+data)
                    this.msg=data
                })
            }                                          
        })
        let vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            mounted () {
                
            }
        })
    </script>

Vue learning Day05-Vue communication between the components (parent to child, child to parent, between brothers)

Guess you like