前面我们已经知道了Vue在原生html中，通过Vue.component去创建
不了解的同学，可以先去看看关于Vue全局组件【html，component】
今天我们来尝试子组件和父组件都出现数据，而且换一种创建组件的方式。在前面的学习中，我们知道可以在Vue.component中直接写template去创建一个组件。但是很显然，这样写会显得很傻，也很容易出现问题。
对此Vue提供了另一个方法，直接通过template去创建子组件的模板。
仔细思考一下，根组件和子组件既然都是一个组件，那么他们之间必然是有相同之处的。既然根组件可以通过el绑定#app去创建，那是不是子组件也同样可以呢？
示例代码如下
<!DOCTYPE html>
<html lang='zh_cn'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width', initial-scale='1.0'>
<title>Vue template 模板</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
</head>
<body>
<div id='app'>
<p style="background-color: yellow;">{{title}}</p>
<my-component></my-component>
</div>
<template id="temp1">
<div >
<p style="background-color: red;">{{title}}</p>
</div>
</template>
<script>
Vue.component('my-component', {
template:'#temp1',
data(){
return{
title:'我是组件内的标题'
}
}
})
var vm = new Vue({
el:'#app',
data:{
title:'我是这个页面的标题'
},
methods:{
},
})
</script>
</body>
</html>- 对于父组件，我们设置背景颜色为黄色，title为
我是这个页面的标题 - 对于子组件，设置背景颜色为红色，title为
我是组件内的标题
现在观察页面出现的效果
结果和我们预期的一样，但是为什么可以这样呢？
我们仔细观察这段代码，创建组件时，除了定义了名字外，还有一个template特别吸引我们的视线
和下面的根组件的el:#app对比一下，一下子是不是就恍然了？
和根组件一样，子组件通过template:#temp绑定了template中的id，而且只能绑定在template中
证明id只能绑定在template中
现在，我们把id切换到div中去，看看会发生什么
结果子组件消失了，并且报错了。
我们现在来看报错的内容
- 找不到元素：#temp1
- Template 元素没找到或者为空：#temp1
- 在<MyComponent>
- <Root>
- 挂载组件失败：模板或者渲染函数没有被定义
但是当我把id='temp1返回template中时，子组件就出现了！
于是证明了id只能绑定在template中，否则找不到template，挂载不上根组件(Root)
所以，我们得出结论，虽然根组件和子组件都有相类似的绑定，但是有区别的是
- 根组件——通过
el绑定 - 子组件——通过
template绑定
实验过程中，可能出现的问题
【Vue warn】： Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.(found in <Root>)
很可能是你组件注册放在创建页面实例对象下面了，尝试把它放在上面
因为，页面需要确定所有组件后，才能正确的渲染
详细解释
现在你把组件的注册放在了下面，而在HTML中的script的代码是顺序执行的，也就是说，当创建根组件的时候，组件还没有被定义，页面当然就会出现丢失子组件的现象了
