Vue 组件父子组件Vue 组件父子组件 Vue 组件父子组件 Vue 组件父子组件 ``` Vue 组件 ``

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 组件</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue 组件</h1>
<hr>
<div id="app">

    <whl>

    </whl>
</div>

</body>
</html>
<script>
    //子组件
    var city={
        template:`<div style="color:dodgerblue">我是河南人</div>`
    };
    //在外部声明一个组件
    //父组件
     var panda={
         template:`
                 <div>
                    <p style="color:red">我是河南来的</p>
                    <city></city>
                </div>
            `,
         components:{
             'city':city
         }
     };
    //爷爷
    var app = new Vue({
        el:'#app',
        components:{
            'whl':panda
        }

    });

</script>

Vue 组件 父子组件

Vue 组件父子组件