<!DOCTYPE html>
<html>
<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'>
<child-a></child-a>
<child-b></child-b>
<!-- 这个位置是组件的视图内容<-选项template -->
----------com-a--------------------
<com-a></com-a>
----------child-c---------------------
<child-c></child-c>
----------parent-a---------------------
<parent-a></parent-a>
</div>
<script src='./vue.js'></script>
<script>
Vue.component("child-a", {
template: `<div>我是child-a组件</div>`
});
Vue.component("child-b", {
template: `<div>我是child-b组件</div>`
});
// 全局组件的使用位置: 可以在后面的任意视图模板中使用
// 此时, child-a和child-b是parent-a的子组件
Vue.component("parent-a", {
template: `<div>我是parent-a组件----
<child-a></child-a>
<child-b></child-b>
<child-c></child-c>
</div>`
});
Vue.component('child-c', {
template: `<div>我是child-c组件</div>`
})
new Vue({
el: '#app',
data: {
},
components: {
// 全局组件child-b是com-a的子组件
// 问题:
// 一个组件是父还是子 与 该组件是全局还是局部 没关系
// 一个组件是父还是子与该组件的使用位置
"com-a": {
template: `<div>
<child-b></child-b>
</div>`
}
},
methods: {}
});
</script>
</body>
</html>
原文：https://www.cnblogs.com/divtab/p/10940862.html