全局组件： 只要全局注册了，每个组件都可以无需单独引用即可使用这个组件，我们可以把Java宣传口号改改用在这个组件身上: 一次注册，处处引用。全局组件特别适合的是那些被高频引用的基础组件，比如: 按钮，弹窗，加载动画等等。
局部组件: 没有被全局注册的组件，需要在使用的组件内部单独引用。这种适合封装业务的组件，被复用机会较少的场景。
全局组件
看下面的这个例子，例子中使用 app.component 的方式注册的组件，就是全局组件。这种组件可以在任意地方使用。
在我们以往提到的有关组件的文章中使用的都是全局组件的注册方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件嵌套示例</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h3>1. 在【根应用】中直接使用：</h3>
<info-box></info-box>
<hr>
<h3>2. 在【大盒子组件】内部嵌套使用：</h3>
<big-box></big-box>
</div>
<template id="big-box-tmp">
<div style="border: 2px solid #333; padding: 10px;">
<p>我是大盒子组件，我里面也嵌套了那个全局组件：</p>
<info-box></info-box>
</div>
</template>
<template id="info-box-tmp">
<button @click="count++" style="background: #42b883; color: white;">
【全局组件】点赞数: {{ count }}
</button>
</template>
<script>
const app = Vue.createApp({});
// 核心：只注册一次【小信息组件】
app.component('info-box', {
template: '#info-box-tmp',
data() { return { count: 0 } }
});
// 注册【大盒子组件】
app.component('big-box', {
template: '#big-box-tmp'
});
app.mount('#app');
</script>
</body>
</html>局部组件
局部组件的使用需要在需要它的组件内部用 components 声明引用，并且，你只能在主动引用它的组件中使用这个组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部组件模仿练习</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 1. 定义最内层的子组件：点赞按钮
const LikeButton = {
template: '<button style="color: red;">❤️ 点赞</button>'
}
// 2. 定义父组件：博客文章，并在内部局部注册 LikeButton
const Post = {
components: {
LikeButton // 局部注册子组件
},
template: `
<div style="border: 1px solid #ccc; padding: 16px; margin-bottom: 10px;">
<h3>这是一篇很有意思的博客文章</h3>
<p>Vue 3 的局部组件需要先定义，然后声明在父组件的 components 选项中才能使用。</p>
<LikeButton />
</div>
`
}
// 3. 创建 Vue 根应用，并在内部局部注册 Post 组件
var vm = Vue.createApp({
components: {
Post // 局部注册文章组件
},
template: `
<div>
<h2>我的博客网站</h2>
<Post />
</div>
`
});
// 4. 挂载到 DOM
vm.mount('#root');
</script>
</html>例如上面这个例子， 我们在Post 组件中用components声明引用了LikeButton ， 所以在Post 模板代码才能用<LikeButton /> 。
相反，我们在根应用vm中没有引用LikeButton ，在这种情况下根应用通过模板使用<LikeButton />则会报错。
下面这种写法就是错误的，<LikeButton />不会被渲染出来并且浏览器控制台有告警日志。除非我们也在跟应用中引用它。
var vm = Vue.createApp({
components: {
Post // 局部注册文章组件
},
template: `
<div>
<h2>我的博客网站</h2>
<Post />
<!-- 错误，下面的这个组件不会被渲染出来，浏览器控制台有WWRN日志 -->
<LikeButton />
</div>
`
});
