Vue components by value

A parent component -> sub-assembly by props

1, sub-assemblies:

Statement: proprs = [ 'xx'], xx attribute references subassembly, the subassembly (Template) within parent components

Reference: {{xx}}

2, parent component

Statement Data: oo

Template referenced parent components subassembly, the attribute value oo

Memory: parent -> child by value, the parent must have value

a, a string passing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <-! <Button> MSG {{}} </ Button> -> 
    </ div > 
    < Script the src = "./ JS / vue.js" > </ Script > 
    < Script > 
        // Vue (parent) -> App (sub) 
        // declare subassembly 
        the let the App = { 
            Data () { 
                return { 
                    text: " bite me " , 
                } 
            }, 
            // B declared variables. 
            Template: `
                         < div > 
                            < P >{{text}}< / P> 
                            < H4 > {ABC} {} < / H4> 
                        < / div> 
                    `,
             // A Statement The props. 
            The props: [ ' ABC ' ], 
        } 
        new new Vue ({ 
            EL: " #app " , 
            Data ( ) { 
                // c declared value. 
                return { 
                    msg: " point me " , 
                } 
            } 
            // if the object has Vue template, the template high priority 
            //3. Referencing subassembly 
            // D declared attributes and values within parent components, subcomponents. 
            Template: `
                 < div > 
                    < Button > {{MSG}} < / Button> 
                    < the App: ABC = " MSG " > < / the App> 
                < / div> 
            `,
             // 2. mount subassembly 
            components: { 
                the App, 
            } 
        }) 
    </ Script > 
</ body > 
</ HTML >

b, passing objects

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let App = {
            data(){
                return {
                    msg: "Vue"
                }
            },
            // 2.
            template: `
                       <p>{{mpost.title}}</p>
                `,
            // 1.
            props: ['mpost']
        }
        new Vue({
            el: "#app",
            data(){
                return {
                    // 3
                    post: {
                        id: 1,
                        title: 'My Journey with Vue'
                    }
                }
            },
            template: `
                <div>
                    <App :mpost="post"></App>

                </div>`,
            components:{
                App,
            },
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let App = {
            data(){
                return {
                    msg: "Vue"
                }
            },
            // 2.
            template: `
                       <p>{{id}}</p>
                `,
            // 1.
            props: ['id', "title"]
        }
        new Vue({
            el: "#app",
            data(){
                return {
                    // 3
                    post: {
                        id: 1,
                        title: 'My Journey with Vue'
                    }
                }
            },
            template: `
                <div>
                    <App :id="post.id" :title="post.title"></App>

                </div>`,
            components:{
                App,
            },
        })
    </script>
</body>
</html>

Vue components by value

Guess you like