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所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。