Vue中局部与嵌套组件

<script src="vue.js"></script>
<style>
    .par{
        width: 100px;
        height: 100px;
        background: cornflowerblue;
        margin-top: 20px;
    }
</style>

</div>

<template id="h">
    <div class="myhome">
        <mychild></mychild>
        <p>我是局部组件{{name}}</p>
    </div>
</template>

<template id="child">
    <div>
        child
    </div>
</template>

<script>
    //局部组件：只能在规定的区域内使用
    //局部组件三部曲：1，创建一个组件 2，注册这个组件 3，使用这个组件
    //嵌套组件：组件中再注册子组件，子组件只能在当前注册的范围内使用
 
    let home={
       // template:'<div>局部组件</div>'
       template:'#h',
       data(){
           return {
               name:'123'
           }
       },
       components:{
           mychild:{//组件名
               template:'#child'
           }
       }
    }

   let vm= new Vue({
        el:'#app',
        data:{
            n:200
        },
        components:{
            myhome:home
        }
    })

    new Vue({
        el:'#app2'
    })

</script>