如何使用vue组件

傷城~ 2024-02-17 13:26 117阅读 0赞

目录

1：组件之间的父子关系

2：使用组件的三个步骤

3：components组件的是私有子组件

4：在main.js文件中使用Vue.component全局注册组件

1：组件之间的父子关系

一：首先封装好的组件是不存在任何的关系的，每个封装好的组件彼此都是独立的。

882da105eba04f70ba07611d40aba474.png

二：在使用组件的过程中根据嵌套关系，可能形成兄弟关系或者父子关系如图所示（APP这个组件中用到了组件Left和组件Right，Left和Right组件与App组件就形成了父子关系，Left和Right组件就是兄弟关系）。

45c60187fc254466b1a10b9cf337299f.png

2：使用组件的三个步骤

一：在哪些组件中需要用到哪些组件就使用import语法导入需要的组件

2d027051dd47440cb6b3b993f2fc9b1b.png

二：使用components节点声明组件

注意：

全写形式：（key:value）

5ae197c08774479cb15c103dd640f76f.png

简写形式：key和value一致，一个名字声明即可

545117cc52854015901f65ca8dc4c293.png

三：按照标签的形式使用刚才注册的组件

2686c4ba0fbb4c6a9e2c51b338502f3c.png

3：components组件的是私有子组件

例如：组件A中的components节点下注册了B组件，那么B组件只能在A组件中进行使用，不能在C组件中进行使用，除非C组件的components节点下声明了B组件，可以使用B组件。

4：在main.js文件中使用Vue.component全局注册组件

场景：频繁使用的组件可以注册到main.js文件中进行全局注册。

在全局中注册的组件，其他的组件使用这个全局组件可直接使用注册时的名称作为标签，全局组件不可在组件中使用自己。

1fd25abd93eb41eb98ff78171de52cef.png

发表评论

表情：
评论列表 （有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue组件使用方法

    Vue 组件是 Vue.js 应用中可复用的代码块，通过组件可以将一个页面拆分为多个独立的部分，使代码更加清晰，结构更加简洁。以下是使用 Vue 组件的步骤： -------

    亦凉亦凉/ 0 赞/ 180 阅读

    相关 如何使用vue组件

    目录 1：组件之间的父子关系 2：使用组件的三个步骤 3：components组件的是私有子组件 4：在main.js文件中使用Vue.component全局注册组件

    傷城~傷城~/ 0 赞/ 118 阅读

    相关 如何创建Vue组件

    Vue 组件 的创建方式 一、什么是组件化 对于组件化,大家都会说出是独立和通常可复用的这么一句话,可是面试官要问你的话… 面试官: 请谈谈你对Vue 的组件化的

    川长思鸟来川长思鸟来/ 0 赞/ 253 阅读