一、父组件和子组件
组件的注册：
- 一个组件可以在Vue实例中注册
- 也可以在另一个组件中注册。
父子组件：
- 组件和组件之间存在层级和嵌套关系
- 如果组件1中引入了组件2，那么组件1称为组件2的父组件。
父子组件的调用和生效：
- 在哪注册在哪范围生效
- 子组件时全局组件，则vue实例可调用
- 否则，子组件仅在父组件注册，则仅能在父组件调用，不能在vue实例调用。
二、代码
<!--作者: ikunsdc -->
<!--日期Date: Do not edit -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>cpn2是cpn1的父组件</p>
<cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1.创建第一个组件构造器
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1（cpnC1）</h2>
<p>我是内容：哈哈哈</p>
</div>
`
})
// 2.创建第二个组件构造器
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2（cpnC2）</h2>
<p>我是内容：，呵呵呵</p>
<cpn1></cpn1> <!--在组件2中引入组件1-->
</div>
`,
components:{ // 在组件cpnC2中注册cpnC1
cpn1 : cpnC1
}
})
//可以看成根组件
const app = new Vue({
el:"#app",
data:{
message:"你好呀"
},
components:{
cpn2 :cpnC2 //在该Vue实例中注册组件2即可。
}
})
</script>
</body>
</html>
二、运行
