Sons between vue.js assembly (downward) by value

Several ways to pass values

1. Sons (downward) by value : The property
2. Child-parent (up) by value : through custom event
3. Non-traditional values Sons : By Bus (non-parent-child value one pass mode)

Sons (downward) by value tutorial

Initial Code:

/*-----------------------html---------------------------------*/

    <input type="button" @click="fn" :value="n">
    <one></one>
    

/*-----------------------js---------------------------------*/
    new Vue({
        el:"#root",
        data:{
            n:1
        },
        components:{
            one:{
                template:`<div>one {{abc}}</div>`
            }
        },
        methods:{
            fn(){
                this.n ++;
            }
        }
    }) //现在是这个功能：我点击 button 按钮，n 就 + 1

Now I want to use this data n in the periphery of one of them

• I have this one component is a subcomponent I instance (you declare somewhere, then I have this assembly who belongs to the sub-components)
• If you just play the template in which n sub-assemblies, get out
• Because our example there is between these components that are not shared data
• If you want to use, it must be allowed to go through

Start using property transfer

/*-----------------------html---------------------------------*/

    <input type="button" @click="fn" :value="n">
    <one :abc="n"></one>   //在这里传递 abc 的参数是 n 
    

Now I use this one pass property values, then you need to have a place to accept this argument

/*-----------------------js---------------------------------*/

    new Vue({
        el:"#root",
        data:{
            n:1
        },
        components:{
            one:{
                props:["abc"],   // 通过props可以限制接收的数据。
                template:`<div>one {{abc}}</div>`
            }
        },
        methods:{
            fn(){
                this.n ++;
            }
        }
    })

flow chart

Precautions:

1. Transfer of property can not be capitalized appear. Need - segmentation. Uppercase lowercase
   • Example :: userName = "n" can not write, to write: user-name = "n"
2. Taken over from the parent is not allowed to directly modify the data.
3. Receiving over the attribute name, the name of the data does not allow the same current component (data attribute name)