Vue3 从入门到放弃 (第三篇.组件的使用)

上一篇讲到了,Vue3的创建第一个Web应用.Vue3 从入门到放弃 (第二篇.创建第一个Web应用)_Meta.Qing的博客-CSDN博客

今天组件的基础与使用,并且使用实际例子,来更好的展示效果.

首先,什么是组件(Component)?

组件(Component)是Vue中的一个重要概念,是一个可以重复使用的Vue实例,它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。

组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对每个部分进行单独的思考。在实际应用中,组件常常被组织成层层嵌套的树状结构:

Vue3 从入门到放弃 (第三篇.组件的使用)_第1张图片

这和我们嵌套 HTML 元素的方式类似,Vue 实现了自己的组件模型,使我们可以在每个组件内封装自定义内容与逻辑。

定义一个组件

我们继续接着上节文章,在工程里 src/components目录下新建一个MetaHeader.vue的文件Vue3 从入门到放弃 (第三篇.组件的使用)_第2张图片

 当使用构建步骤时,我们一般会将 Vue 组件定义在一个单独的 .vue 文件中,这被叫做单文件组件 (简称 SFC):

然后,我们再MetaHeader.vue添加以下代码:





一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。

 

1.局部注册(推荐)

局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,并且对 tree-shaking 更加友好。

要使用一个子组件,我们需要在父组件中导入它。

父组件 src/views/Home/HomeIndex.vue







通过 

你可能感兴趣的:(Vue,vue3,前端,vue)