美文网首页
vue封装组件(全局和局部)

vue封装组件(全局和局部)

作者: web30 | 来源:发表于2020-02-09 16:17 被阅读0次

使用场景:当项目中有大量重复的结构、样式、函数等可以封装组件


image.png
image.png

比如说图片上的span标签需要写5次,但是通过封装的话只 要写1次就可以了

image.png

封装流程:

  1. 把全局组件写完整
    image.png
    template里的内容需要用根元素<div></div>包裹起来
    组件里的data必须是一个带有返回值的函数,需要return,如果是对象的话会报错
    **new实例可以是对象 **

2.把重复的标签的地方替换成新封装的组件

image.png
每新增加一个封装组件,就相当于重新new了一个实例,因为封装的组件之前的数据互不影响

2.最后效果


image.png

局部组件封装


image.png image.png

相关文章

  • Vue 全局组件和局部组件

    vue、js、html文件都可以注册全局组件和局部组件 全局组件 局部组件 vue-custom-element ...

  • Vue2.0注册局部组件和全局组件

    记录一下不使用vue-router注册局部组件和全局组件 注册一个局部组件 文件:agg.vue 注册一个全局组件

  • Vue中的组件

    什么是组件? 组件可以扩展 HTML 元素,封装可重用的代码。 使用组件 注册 全局注册 局部注册通过Vue实例的...

  • VUE组件总结

    组件是vue最强大的功能之一,组件化开发。 组件可以扩展HTML元素,封装可重用的代码。 组件可分为局部变量和全局...

  • 2018-09-18

    组件是可复用的 Vue 实例一、组件:可以拓展HTML元素,封装可重用的代码组件分为全局组件和局部组件通过prop...

  • vue 自定义组件(一)全局、局部组件

    vue自定义组件分为局部组件和全局组件 全局组件 全局组件格式template 是模板props 是自定义组件用到...

  • 组件化开发

    一、全局组件和局部组件 全局组件:即可以在多个Vue实例中使用 局部组件:只能在当前Vue实例中使用 使用:在Vu...

  • vue封装组件(全局和局部)

    使用场景:当项目中有大量重复的结构、样式、函数等可以封装组件 比如说图片上的span标签需要写5次,但是通过封装的...

  • 【Vue.js】 todolist组件拆分(八)

    1、component全局组件 2、局部组件 A、定义局部组件 B、局部组件需要到Vue中声明引用 3、外部向组件...

  • Vue2(二):组件

    注册全局组件 局部注册 ps:这种封装也适用于其它可注册的 Vue 功能,如指令。 , , , 时:用...

网友评论

      本文标题:vue封装组件(全局和局部)

      本文链接:https://www.haomeiwen.com/subject/wkdxzctx.html