VUE组件化开发的精髓

e10101 发布于2019-05-23 11:05 / 2343人阅读

摘要：开篇的简单介绍和演示的开发精髓组件组件的三个组件之间的通信方式实例讲解銖宝益帮助中心前端组件开篇的简单介绍和演示发布于年，是一个渐进式的框架，同时也是一个轻量级的框架，它只关心数据，从而让开发者不用过多的关注的改变和操作，的作者为尤雨溪，

开篇：vue.js的简单介绍和演示

vue的开发精髓-组件

vue组件的三个API：prop、event、slot

组件之间的通信方式

实例讲解：銖宝益帮助中心前端组件

开篇：vue.js的简单介绍和演示

vue发布于2013年，是一个渐进式的框架，同时也是一个轻量级的框架，它只关心数据，从而让开发者不用过多的关注DOM的改变和操作DOM，vue的作者为Evan You（尤雨溪），任职于Google Creative Lab

DOM：document object model（文档对象模型）也就是操作html或xml的通用编程接口，这里不过度描述

双向绑定代码演示

// html

    "app">
        type="text" v-model="note">
        {{ note }}
    


// js
var app = new Vue({
    el: "#app",
    data: {
        note: ""
    }
})

对比其它web前端框架，vue更容易上手，代码和API更为简洁和直观，且速度更快！

vue的开发精髓-组件

vue最精髓的，正是它的组件与组件化,写一个 Vue 工程，其实就是在写一个个的组件。

vue组件的分类（三大类）

由 ==vue-router产生的每个页面==，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大，因为它作为路由的渲染，不会被复用，因此也不会对外提供接口；在项目开发中，我们写的大部分代码都是这类的组件（页面），协同开发时，每人维护自己的页面，很少有交集。这类组件相对是最好写的，因为主要是还原设计稿，完成需求，不需要太多模块和架构设计上的考虑；

不包含业务，独立、具体功能的==基础组件==，比如日期选择器、模态框等。这类组件作为项目的基础控件，会被大量使用，因此组件的 API 进行过高强度的抽象，可以通过不同配置实现不同的功能；

==业务组件==。它不像第二类独立组件只包含某个功能，而是在业务中被多个页面复用的，它与独立组件的区别是，业务组件只在当前项目中会用到，不具有通用性，而且会包含一些业务，比如数据请求；而独立组件不含业务，在任何项目中都可以使用，功能单一，比如一个具有自定义数据校验功能的输入框。

vue组件的三个API：prop、event、slot

一个组件的复杂与否，都是由三部分组成的，==prop（属性）==，==event（事件）==，==slot（插槽）==，必须要先设计好这三部分，才能继续开发组件，否则，代码一旦发布，后面再修改API就很困难了，组件的维护都是以新增功能为主，而不是经常变更接口；

prop（属性）

prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。

例如：收银端的打印弹框组件（部分代码已简略）

组件中定义了4个prop，分别是==show==（控制组件的显示隐藏），==web_view_url==（打印URL），==web_view_reback_path==（关闭打印后的跳转地址），==web_view_error==（是否打印加载失败）

值得注意的是，组件里定义的prop都是单向数据流，只能通过父级组件对齐进行修改，组件本身不能修改props的值，只能修改定义在data里的数据，非要修改，也是通过后面介绍的自定义事件通知父级，由父级来修改；

solt（插槽）

先看下代码

这里的节点就是指定的一个插槽的位置，这样在组件内部就可以扩展内容了；


  "icon" type="checkmark">
  按钮 1

这样，父级内定义的内容，就会出现在组件对应的 slot 里，没有写名字的，就是默认的 slot；

event（事件）

还是先看代码

在组件中可以通过$emit触发自定义事件on-click，在父组件通过@on-click来监听

"handleClick">

组件之间的通信方式

Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递

1、父子组件之间的通信方式

父组件向子组件的通信方式可以通过props传递：如果需要从父组件获取 username 的值，就需要

props:{
   username:{
        
   }
}

子组件向父组件传递数据则可以通过event传递：

 methods:{
    handelSwitch(index){
      this.actIndex=index;
      this.$emit("transferTabIndex",this.actIndex)
    }
  }

2、非父子组件之间的通信方式：eventBus

eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听；

但是因为是非父子组件的关系,他们需要有一个中间组件来连接；

我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下；

使用eventBus传递数据,我们一共需要做3件事情

1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)；

2.在组件1里,this.

GPU云服务器云服务器 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6898.html

vuejs组件通信精髓归纳

摘要：组件的通信和和内置的通信手段一般有两种给元素或组件注册引用信息访问父子实例。有时候两个组件之间需要进行通信，但是它们彼此不是父子组件的关系。详情可参考参考组件之间种组件通信方式总结参考参考组件的分类常规页面组件，由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。功能性抽...

妤锋シ 2019-08-23 15:23 评论0 收藏0
【Vue原理】Vue源码阅读总结大会 - 序

摘要：扎实基础幸好自己之前花了大力气去给自己打基础，让自己现在的基础还算不错。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Vue源码阅读总结大会 - 序阅读源码是需...

Edison 2019-08-23 18:18 评论0 收藏0
vue模拟携程官网的搭建

摘要：仿造携程官网题外话刚开始学前端的时候有一天看到携程官网就希望有一天能模拟搭出来自己拖拖拉拉的一直没整但是但是麻麻我终于完成了曾经亲爱的同事把传送门删掉了不感谢他了感谢叶师兄拯救了我携程携程源码仿携程源码目录结构基于进行开发配合强行在携程复制仿造携程官网题外话:刚开始学前端的时候,有一天看到携程官网.就希望有一天能模拟搭出来.自己拖拖拉拉的一直没整, 但是但是麻麻我终于完成了!!(曾...

MartinHan 2019-08-01 17:47 评论0 收藏0
深入理解js对象的引用

JavaScript 有七种内置类型，其中：基本类型 • 空值(null) • 未定义(undefined) • 布尔值( boolean) • 数字(number) • 字符串(string) • 符号(symbol，ES6 中新增) 引用类型 • 对象(object) 对于基本类型，赋值（=）是值的拷贝，比较（===）的是实际的值，而对于引用类型（Array也是一种Object），赋值（=）...

hedge_hog 2019-08-22 16:57 评论0 收藏0
React专题：react，redux以及react-redux常见一些面试题

摘要：我们可以为元素添加属性然后在回调函数中接受该元素在树中的句柄，该值会作为回调函数的第一个参数返回。使用最常见的用法就是传入一个对象。单向数据流，比较有序，有便于管理，它随着视图库的开发而被概念化。面试中问框架，经常会问到一些原理性的东西，明明一直在用，也知道怎么用，但面试时却答不上来，也是挺尴尬的，就干脆把react相关的问题查了下资料，再按自己的理解整理了下这些答案。 reac...

darcrand 2019-08-23 13:41 评论0 收藏0