美文网首页
vue组件化开发

vue组件化开发

作者: 黑白说程序 | 来源:发表于2020-09-17 21:39 被阅读0次

什么是组件化

将一个页面拆分成小的模块,每个模块完成独立的功能,然后将模块组成一个完整的页面,在vue中vue提供了一-种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。vue中任何的应用都会被抽象成一-颗组件树。

vue组件树

组件分为三个步骤

①创建组件构造器 Vue.extend创建组件 

 Vue.extend里也可以放组件,就是注册子组件 ,Vue.extend({template: ``,components: {con111: com2}})

②注册组件 分为局部注册,全局注册。

 Vue.component()注册组件是全局组件,多个vue实例都可以使用。局部组件是实例中写, new Vue({el: '#app',components: { comm: com}

③使用组件 

组件注册

父子组件

定义父子组件之间,在组件构建器里使用components注册子组件

父子组件

注意

我们在实际开发中一般只有一个vue实例,这实例其实也算一个组件,被称为根组件

爷组件是不可以直接调用孙组件使用的,需要在爷组件重新注册为子组件,这是因为vue在加载时已经把组件编译完成

组件模板分离写法:①写在script标签中              ②写在template标签中

子组件读取data数据

相关文章

  • Vue 学习记录二

    组件化: 动态组件 父子组件 插槽 数据共享(Vuex) Vue Router: 生命周期: Plugin 开发:...

  • 简单情况

    Vue和Angular、React都是前端框架 1、单页面框架 2、基于模块化组件化的开发模式 Vue简单 灵活 ...

  • Vue-基础语法(三)

    组件化开发 一、组件概念组件化规范:Web Components 浏览器支持不好,vue 实现了这个规范https...

  • vue项目实践后的一些体会感想

    用了vue开发网页后,一下子喜欢上了vue。vue轻量,开发可以做到很好的前后端分离、组件化和模块化。最近在给公司...

  • Vue源码阅读(二)

    组件化 vue可以使用组件化来开发,在前边介绍_createElement方法时,在对原生的tag时直接创建vno...

  • Vue单文件组件开发的基本套路--以常用的Modal模态框组件开

    在实际开发工程化vue项目时,基本都是使用单文件组件形式,即每个.vue文件都是一个组件。最基本的就是UI组件了,...

  • vue(2)

    Vue组件化开发 组件化开发的思想 组件的注册 组件间的数据交互 组件插槽的用法 Vue调试工具的用法 组件开发思...

  • React组件一

    组件化开发一 目前,前端三大框架(Vue,React,Angular)都在使用组件化的我形式进行开发。19年最火的...

  • 如何开发vue、react、angular的组件库教程

    关键词:vue,react,angular,开发,封装,ui组件,组件库,常用组件 目标:开发相应的组件库vue-...

  • vue 实现数据共享模式.

    vue 都是组件化的开发模式. 整个组件树中,组件和组件之间的关系如下图所示. 父子组件传值一般用 props &...

网友评论

      本文标题:vue组件化开发

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