Vue.js 组件的局部注册,求解？

Question

<div id="example">
    <parent></parent>
</div>
<script type="text/javascript">
    // 局部注册
    var Child = Vue.extend({
        template: '<div>Child</div>'
    });
    // 为什么 Child 不显示?
    var Parent = Vue.extend({
        template: `<div>Parent</div>`,
        components: {
            // child 只能用在父组件模版内
            'child': Child
        }
    });
    var vm2 = new Vue({
        el: '#example',
        components: {
            'parent': Parent
        }
    });
</script>

上面代码，不知道什么原因，为什么 child 组件中 内容不显示？
官方的例子不太理解。
求大神解答？

Answer 1

你得把<child></child>写到parent的template里才行

Answer 2

关于Vue2.0版本官网上的 【组件】 #全局组件 和 #局部组件 的详细解释

#全局注册<global></global>

<div id="app-1">
  <global></global>
  <local></local>
</div>

<script>
//全局注册
Vue.component('global',{
    template:'<div>这是一个全局注册组件</div>'
})
//创建根实例
new Vue({
    el:"#app-1"
})
</script>

#局部注册<local></local>

<div id="app-2">
  <global></global>
  <local></local>
</div>

<script>
//局部注册
var Child={
    template:'<div>这是一个局部注册组件</div>'
}
new Vue({
    el:"#app-2",
    components:{
        //引用局部组件
        'local': Child 
    }
})
</script>

渲染结果为：

---------个人见解-------------

可以看到，

1.全局组件在#app-1和#app-2中都被渲染出来，也就是说整个页面中只要添加<global></global>元素就都能渲染出来。
2.局部组件只在#app-2中被渲染出来，也就是说只有在实例中使用componentsAPI声明'local':Child才算完成注册<local></local>

值得一提的是：
Vue.component(tagName, options)
和
var Child = {
template: '/...'
}
都应该写在实例之前

Answer 3

<div id="example">

<parent></parent>

</div>
<script type="text/javascript">

// 局部注册
var Child = Vue.extend({
    template: '<div>Child</div>'
});
// 为什么 Child 不显示?
var Parent = Vue.extend({
    template: `<div>Parent:<child></child></div>`,//你的子组件得引到父模版里来
    components: {
        // child 只能用在父组件模版内
        'child': Child
    }
});
var vm2 = new Vue({
    el: '#example',
    components: {
        'parent': Parent
    }
});

</script>