和全局组件相对应的就是局部组件，你可以把局部组件看成一个变量，然后在使用的地方注册这个组件，才可以使用。
局部组件的最大好处就是只有在使用的时候，才会耗费系统资源，不像全局组件一样，一直都存在。你现在看这段话可能不能很好的理解，下面通过代码，来讲解一下什么是局部组件。
新建文件
打开VSCode，新建一个文件Demo25.html，基础代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `<h2>mybj123.com</h2>`
})
const vm = app.mount("#app")
</script>
</html>
这时候可以打开浏览器看一下是否可以显示出正常内容。如果可以正常显示，说明一切正常。接下来就可以编写一个局部组件了。
创建局部组件
注册局部组件，其实你可以理解成就是声明一个变量，这个变量是一个对象，所以最外层我们使用大括号{}（花括号），然后里边和使用Vue.CreateApp( )时传递的参数是一样的。
const counter = {
data() {
return {
count: 0
}
},
template: `<div>{{count}}<button @click="count++">增加 1</button></div>`
}
注册完组件后，我们还不能直接使用，如果直接使用会报错。这时候要作的是在vue.CreateApp()方法里进行注册。
组测局部组件
注册局部组件的方法很简单，直接用components属性来声明就可以了。
const app = Vue.createApp({
components: { counter },
template: `
<h2>JSPang.com</h2>
<counter />
`
})
但是这只是简写方法，正确的写法应该是components: { counter:counter }, ，其实就是给组件起个名字，你甚至可以叫做mybj。
const app = Vue.createApp({
components: { mybj: counter },
template: `
<h2>mybj123.com</h2>
<mybj />
注册好后，你就可以直接在模板中使用了。需要注意的是，局部变量也是拥有独立性的，所以可以进行复用。
局部组件的编写有一些不成文的潜规则，下面介绍一下。
局部组件使用大驼峰命名法
有时候我们的组件名字会比较长，比如写一个youYuXi组件。
const youYuXi = {
template: `<h2>尤雨溪</h2>`
}
现在变量的名字有大小写，这时候在组测组件时，要使用这种形式（用-切割单词）。
const app = Vue.createApp({
components: {
mybj: counter,
'you-yu-xi': youYuXi
},
template: `
<h2>JSPang.com</h2>
<you-yu-xi />
<mybj />
`
产生这种问题是因为一个矛盾点，就是变量中不能使用-，而组件调用确实可以的。所以为了区分组件，在定义局部组件的时候，潜规则是首字母进行大写，然后使用驼峰命名法。
const YouYuXi = {
template: `<h2>尤雨溪</h2>`
}
这里给出本节的全部代码，帮助你更好的学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const Counter = {
data() {
return {
count: 0
}
},
template: `<div>{{count}}<button @click="count++">增加 1</button></div>`
}
const YouYuXi = {
template: `<h2>尤雨溪</h2>`
}
const app = Vue.createApp({
components:{
mybj: Counter,
'you-yu-xi': YouYuXi
},
template: `
<h2>mybj123.com</h2>
<you-yu-xi />
<mybj />
`
})
const vm = app.mount("#app")
</script>
</html>