Vue 组件的本质

前面的内容我们学习了 Vue 创建的 app 实例最终去哪了，今天来学习组件。Vue3 在定义组件模板时，不需要使用一个根标签来包含子标签了，模板可以直接这样定义：

const SuYanCard = {
    template: '<h1>{
   { title }}</h1><div></div>'
};

当使用 Vue.createApp 时需要传一个参数「根组件」，那我们今天就聊一聊什么是组件。

组件的本质是什么？

组件其实是一个「特制」的 JS 对象，内部定义了一些数据和方法。它是一个功能的集合体，是普通 HTML 标签的功能扩充。

组件出现的背景，为啥要有组件？

• 复用，同一功能，可能很多页面会用到；

• 解耦，页面代码比较多的时候，把每一部分拆分成独立的模块有助于代码维护；

定义一个简单的组件，它可以只有一个模板属性 template：

const SuYanCard = {
    template: '<h1>读懂Vue编程思想</h1>',
};

组件注册

1、全局注册：

组件在使用时需要注册，注册的本质是把组件这个对象保存到 app 实例中，为以后使用。把 SuYanCard 注册到 vue 中，使用这种方式注册的组件，所有地方都能使用。suyan-card 为组件的名字，在使用的时候需要使用这个名字。

const app = Vue.createApp();
app.component('suyan-card', SuYanCard);

一旦注册了组件，即可在 Vue 的模板中使用组件，就像使用 HTML 标签一样。