组件之间的嵌套

作者: 咸鱼前端 | 来源:发表于2019-03-03 08:52 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.2.2单向数据流</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <parent></parent>
    </div>
    <script type="text/javascript" src="/node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var childNode = {
            template: "<div>childNode</div>"
        };//创建子组件的模板
        var parentNode = {
            template: `
                <div class='parent'>
                    <child></child>
                    <child></child>
                </div>
            `,//这里用es6语法的模板字符串
            components: {
                'child': childNode//这里将子组件注册到父组件内。用<child>渲染childNode
            }
        }//创建父组件的模板
        var vm = new Vue({
            el: "#app",
            components: {
                "parent": parentNode//将父组件注册到根元素上，用<parent>渲染parentNode
            }
        })
        //达到了组件之间的嵌套
    </script>
</body>
</html>