vue.js (18) - parent component subassembly to pass values

Sub-assembly is not directly use the data in the parent component, the properties required to bind (v-bind: Custom attribute name = "msg"), requires the use of props in the binding subassembly [ 'custom property name'] array to define a custom name of the parent component.

Props array data is read-only, parent components are readable and writable data.

Subassemblies own data, sub-assemblies can be accessed directly, independent of the parent component.

< Div class = "App" > 
        < mycom1 V the bind-: mymsg = "MSG" > </ mycom1 > 
        <-! When you want to use data in the parent sub-assembly components, bound to the properties required by the parent component (v-bind), 
            in order to get the data on the parent element -> 
    </ div > 
    < Template ID = "CMP1" > 
        < div > 
            < h1 of > 
                I was a sub-assembly +++ parent components I data by passing props mymsg} {} { 
            </ h1 of > 
            < h1 of > I was subassembly Data: mymsg1 {{}} </ h1 of > 
        </div>
    </Template > 
    < Script > 
        var VM =  new new Vue ({ 
        EL: ' .app ' , 
        Data: { 
            MSG: ' hahahah ' 
        }, 
        Components: { 
            mycom1: { 
                Template: ' # CMP1 ' , 
                The props: [ ' mymsg ' ], // props is an array of data used to define the properties of the parent component binding, in order to use the definition of the 
                data () { // data props are read-only, data dATA is readable and writable 
                    return {
                        mymsg1: ' heheheheeh ' 
                    } // Data is herein subassembly own data, the subassembly can be accessed directly, regardless of the parent components 
                } 
            } 
        } 
    })   
    </ Script >