定义一个局部组件用const ，相当于定义一个变量，变量里面写组件的相关属性
全局组件一直挂载在app上面，所以用 app.componentP()
局部组件只有用到的时候，才渲染，所以用到的时候，需要用components接收
父组件引用子组件，向里面传值，静态传值用直接按照属性 = 属性值的形式，比如 content = "aaaa" 子组件接收用props["content]
如果是动态传值，需要在属性=属性值前面加一个冒号，并且属性值要在data里面定义好
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!-- 引入vue,下面直接打点创建一个应用 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 先定义一个 局部组件，只有接收的时候，才用
// 相当于定义了一个变量，里面正常写组件相关属性和方法
const Small = {
// 变量
// 模板,子组件的内容不要 写死，内容来自于父组件传值
// 用props接收父组件传值
props: ["content"],
template: `
<div>{{content}}</div>
`,
};
// 定义 一个应用,这是跟组件
const app = Vue.createApp({
// 模板，里面用到子组件
// 模板里面如果用全局组件，直接把全局子组件写进去
// 跟组件里面用到局部组件，需要用components来接收,写成components:{子组件名字}，不是写在跟组件的template里面，是写在外面
components: { Small },
// components接收了，然后在跟组件的template里面使用
// 用到局部组件，向里面传值，现在是静态传值，动态传值需要在属性=属性值前面加个冒号，并且要把属性值定义在data里面
template: `
<Small content = " hello world" />
<h1>这是一个用到的子组件<Son /></h1>
<Son />
<Son />
<Son />
<Son />
`,
});
// 定义子组件，app.component表示定义全局组件，可以多次复用，并且互不影响
app.component("Son", {
template: `
<h1>我是子组件</h1>
`,
});
const vm = app.mount("#root");
</script>
</html>
