如何使用vue组件
  Eab8PqVrV6ZI 2023年12月19日 33 0


目录

1:组件之间的父子关系

2:使用组件的三个步骤

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

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


1:组件之间的父子关系

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

如何使用vue组件_封装

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

如何使用vue组件_ecmascript_02

 

2:使用组件的三个步骤

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

如何使用vue组件_javascript_03

二:使用components节点声明组件

注意:

全写形式:(key:value)

如何使用vue组件_封装_04

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

如何使用vue组件_javascript_05

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

如何使用vue组件_封装_06

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

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

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

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

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

如何使用vue组件_封装_07

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月19日 0

暂无评论

推荐阅读
  BnLyeqm7Fyq6   2023年12月22日   47   0   0 封装Java封装Java
Eab8PqVrV6ZI