Vue3组件的注册

组件是Vue.js中的一个重要概念，它是一种抽象，是一个可以复用的Vue.js实例。它拥有独一无二的组件名称，可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。

在大多数系统网页中，网页都包含header、body、footer等部分，很多情况下，同一个系统中的多个页面，可能仅仅是页面中body部分显示的内容不同，因此，这里就可以将系统中重复出现的页面元素设计成一个个组件，当需要使用的时候，引用这个组件即可。

在为组件命名的时候，需要使用多个单词的组合，例如组件可以命名为todo-item、todo-list。但Vue.js中的内置组件例外，不需要使用单词的组合，例如内置组件名称App、<transition>和<component>。这样做可以避免自定义组件的名称与现有的Vue.js内置组件名称以及未来的HTML元素相冲突，因为所有的HTML元素的名称都是单个单词。

在Vue.js中创建一个新的组件之后，为了能在模板中使用，这些组件必须先进行注册以便Vue.js能够识别。在Vue.js中有两种组件的注册类型：全局注册和局部注册。

6.2.1 全局注册

全局注册组件使用应用程序实例的component()方法来注册组件。该方法有两个参数，第一个参数是组件的名称，第二个参数是函数对象或者选项对象。语法格式如下：

app.component({string}name,{Function|Object} definition(optional))

因为组件最后会被解析成自定义的HTML代码，所以可以直接在HTML中将组件名称作为标签来使用。全局注册组件示例如下。

【例6.1】全局注册组件（源代码\ch06\6.1.html）。

<div id="app"><!--使用my-component组件--><my-component></my-component>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>//创建一个应用程序实例const vm= Vue.createApp({});vm.component('my-component', {data(){return{message:"红罗袖里分明见"}},template: `<div><h2>{{message}}</h2></div>`});//在指定的DOM元素上装载应用程序实例的根组件vm.mount('#app');
</script>

运行上述程序，按F12键打开控制台并切换到Elements选项卡，效果如图6-1所示。

从控制台中可以看到，自定义的组件已经被解析成了HTML元素。需要注意一个问题，当采用小驼峰（myCom）的方式命名组件时，在使用这个组件的时候，需要将大写字母改为小写字母，同时两个字母之间需要使用“-”进行连接，例如<my-com>。

6.2.2 局部注册

有些时候，注册的组件只想在一个Vue.js实例中使用，这时可以使用局部注册的方式注册组件。在Vue.js实例中，可以通过components选项注册仅在当前实例作用域下可用的组件。

【例6.2】局部注册组件（源代码\ch06\6.2.html）。

<div id="app">库房里还剩<button-counter></button-counter>台洗衣机。
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>const MyComponent = {data() {return {num: 1000}},template: `<button v-on:click="num--">{{ num }}</button>`			}//创建一个应用程序实例const vm= Vue.createApp({components: {ButtonCounter: MyComponent}});//在指定的DOM元素上装载应用程序实例的根组件vm.mount('#app');
</script>

运行上述程序，单击数字按钮将会逐步递减数字，效果如图6-2所示。