Vue中组件的基础知识「一」__Vue.js
发布于 3 天前 作者 banyungong 99 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: smartblue

一、组件概括

1.1、组件的特点

  • 每个组件就是一个自定义标签
  • 可复用
  • 方便维护
  • 方便拆分
  • 每个组件都是一个独立的vm实例
  • 每个组件作用域隔离「互不干扰」
  • 有完整的生命周期
  • 有自己的响应式数据和各种方法「事件」

1.2 组件调取

  • 单闭合:不符合W3C规范,后面调取完成后,后面的视图不识别「避免使用单闭合」
  • 双闭合:可以设置除组件规定内容外的其余内容「slot插槽」

1.3 Vue脚手架中的组件

  • 放置在components文件下
  • 组件名称最好采用驼峰命名

二、创建组件

2.1 创建全局组件

第一步:在components文件夹下新建一个GlobalCom.vue组件

  • 组件中的data属性必须是一个函数,且必须返回一个对象
  • 为什么是返回一个对象:组件的思想是复用性,每次调用这个组件时,返回一个新对象,这样会形成一个闭包,即我在这个组件中修改了data里面的值,也不会影响到其它组件「类似于单例设计模式」
  • data这个函数不能是箭头函数,因为箭头函数中没有自己的this「我们在开发的时候需要用到this」
  • 组件中的name属性是方便配置路由的时候使用
  • 在vue2中组件最外层必须套一个div元素,且只能有一个「根元素」

image.png

第二步:在main.js中导入并注册组件

  • 在main.js中基于import导入GlobalCom组件
  • 使用Vue.component注册全局组件 image.png

第三步:在其他页面中使用全局组件

  • 在页面中使用组件标签「注意要使用双闭合标签」

image.png

2.2 局部组件

第一步:在components文件下新建PartialCom.vue组件

image.png

第二步:在需要使用该组件的页面中导入、注册、书写组件标签使用该组件

image.png

image.png

三全局组件和局部组件的区别

  • 全局组件:一般用于封装插件,全局组件需要在main.js中导入和注册,在其他页面中使用时,直接书写组件标签就可以,不需要再导入
  • 局部组件:要想在其他组件中使用,就必须得在当前页面中导入,注册才可以

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 良雨 原文链接:https://juejin.im/post/7005575990353084430

回到顶部