从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信)

本文主要是介绍从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。关于前两篇文章的内容,若读者有些记不清楚,可以点击下方链接快速查看:
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(二、编写导航页)
由于最近比较忙,所以更新速度比较慢,请读者谅解。另外值得一提的是,ElementUI2.0版本已经推出beta版本,有一些新功能和新样式,感兴趣的读者可以访问Element2.0官网进行查阅。我本人最近也在研究,欢迎讨论。本文中仍使用1.X版本的ElementUI。

本文结尾附有当前工程的下载地址

正文

下面进入正题。在这篇文章中我将对第一个非导航页面,也就是第一个有实质内容的页面进行设计和开发。这次我们要开发一个拥有表单和表格功能的页面。先上开发完的效果图:


这里写图片描述

效果图

可以看出页面非常的简单,其中上半部分是表单搜索和查询,下半部分是用于展示数据的表格。如果按照传统的开发思路,其实非常简单,只要用两个div,第一个div放置表单,第二个div放置表格即可。但是,我们今天要介绍的,是这个页面的另一种写法,也是vue作为一个优秀的前端框架的核心功能,也就是组件化的写法。

什么是组件化?

某搜索引擎告诉我们,组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性。以我们这次要编写的页面为例,组件化就是要将这个页面里面的表格和表单分开成两个不同的组件,每个组件有它自己的属性和状态,既互不干扰又可以互相通信。

为什么要组件化?

从上文中的定义我们也可以看出,组件化的主要目的是解耦。当然,还有其他的目的,比如组件复用,按需引入等。具体的细节我们可以先往下看。

开始之前

为了规范工程的层级,我们把原先与Navi文件夹同级的Page1,Page2和Page3.vue文件删掉,重新建立三个名为Page1,Page2和Page3的文件夹,并分别在三个新建立的文件夹中建立Page1.vue,Page2.vue和Page3.vue。当然,结束之后同样要修改vue-router对于这三个组件的引用路径。如下图


这里写图片描述
修改后的router

接着,在刚才建立的Page1文件夹下,建立两个新vue组件:StudentForm.vue和StudentTable.vue。
这两个组件就是我们即将要编写的表单组件和表格组件。

接下来要介绍两种vue组件间传值的方法。对于父子组件的传值,网上有很多教程,这里不详述。对于其他类型的传值,我们这里要介绍vue的状态管理机制,vuex。

我们首先在src目录下新建一个名为vuex的文件夹,在vuex文件夹下建立一个index.js文件,作为vuex的配置文件。然后在vuex文件夹下再建立一个Modules文件夹,用于放置模块的状态文件。在Modules中新建一个Navi.js,用于存储Navi模块的状态;新建一个Student.js,用于存储我们即将要写的student模块的状态。
下面是代码
Navi.js

/** 导航页*/
const state = {//学生类型studentTypeList:[],}const actions = {//存入交通类型数据changeStudentTypeListAction({commit}, payload) {commit('changeStudentTypeListMutation', payload)},
}//mutations,真正用来修改state的方法集
const mutations = {changeStudentTypeListMutation (state, payload) {state.studentTypeList = payload},
}const getter = {}const moduleNavi = {state: state,mutations: mutations,actions: actions,getter: getter
}export default moduleNavi;

可以看到我们导出的模块主要有四个部分:state,mutation,action和getter。state用于存储模块的状态,这个“状态”可以理解为在组件化开发下当前模块的全局变量,即需要进行通信的变量。action用于提交mutation,我们可以在action里进行异步操作。mutation是真正修改状态的函数。而getter类似于vue中的computed计算属性,这里我们用不到,所以暂时不添加内容。
下面是Student.js

/** 学生基本信息*/
const state = {//查询学生基本信息的表单studentForm: {id: '',name: '',type: '',},//是否进行查询studentQueryFlag: false,}const actions = {//存入搜索船舶基本资料form值changeStudentFormAction({commit}, payload) {commit('changeStudentFormMutation', payload)},//更改是否搜索标识changeStudentQueryFlagAction ({commit}, payload){commit('changeStudentQueryFlagMutation', payload)},}//mutations,真正用来修改state的方法集
const mutations = {changeStudentFormMutation (state, payload) {state.studentForm = payload},changeStudentQueryFlagMutation (state, payload) {state.studentQueryFlag = payload},
}const getter = {}const moduleStudent = {state: state,mutations: mutations,actions: actions,getter: getter
}export default moduleStudent;

这个模块就是我们即将要编写的页面模块。这里面的state存储了两个变量:一个是查询所用到的表单,另一个是用于表示是否进行查询的标识flag。说到这,就不得不提到我们这次组件化开发,预计的程序运行的流程。这里我们用Page1.vue作为表单和表格组件的父组件。

  1. 在页面中表单内输入数据
  2. 表单组件通过调用student模块的action->mutation,将表单内的数据同步到state中
  3. 点击搜索按钮时,表单组件通过action->mutation,将state中的搜索flag(初始化为false)置于true
  4. Page1.vue中设置一个局部变量,将这个局部变量computed为state中的搜索flag
  5. 将步骤4中的局部变量通过父组件->子组件方式传值至表格组件中
  6. 表格组件中对这个接收到的值进行watch,当且仅当这个值由false变为true时,以state中的表单数据为搜索条件,向服务器发送请求,获取数据并渲染
  7. 最后一步千万不要忘了,表格组件还要通过调用student模块的action->mutation,将state中的搜索flag重新置为false。

    可以看出这些步骤相对于非组件化编程来说很麻烦,但是它很好的解决了解耦的问题:表单组件不需要知道它的搜索请求发给了谁,而表格组件不需要知道是谁发起的搜索请求。如果你熟悉或使用过消息中间件,或是研究过订阅发布模式,你可以体会到相同的感觉。举个例子:我们一般会使用websocket或一些其他方式来进行服务端对客户端的消息推送。当我们从服务端推送“更新列表”的消息至客户端时,客户端的处理函数可以直接修改state中的搜索flag而达到效果,自始至终都与我们编写的表单组件不产生关系和耦合。

接下来是vuex中的index.js修改后的代码

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)import navi from './Modules/Navi'
import student from './Modules/Student'export default new Vuex.Store({modules: {navi: navi,s

这篇关于从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1093789

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

搭建Kafka+zookeeper集群调度

前言 硬件环境 172.18.0.5        kafkazk1        Kafka+zookeeper                Kafka Broker集群 172.18.0.6        kafkazk2        Kafka+zookeeper                Kafka Broker集群 172.18.0.7        kafkazk3

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

【STM32】SPI通信-软件与硬件读写SPI

SPI通信-软件与硬件读写SPI 软件SPI一、SPI通信协议1、SPI通信2、硬件电路3、移位示意图4、SPI时序基本单元(1)开始通信和结束通信(2)模式0---用的最多(3)模式1(4)模式2(5)模式3 5、SPI时序(1)写使能(2)指定地址写(3)指定地址读 二、W25Q64模块介绍1、W25Q64简介2、硬件电路3、W25Q64框图4、Flash操作注意事项软件SPI读写W2

pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu 安装编译工具链下载sdk 和example编译example 安装编译工具链 sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi libstdc++-arm-none-eabi-newlib 注意cmake的版本,需要在3.17 以上 下载sdk 和ex

如何编写Linux PCIe设备驱动器 之二

如何编写Linux PCIe设备驱动器 之二 功能(capability)集功能(capability)APIs通过pci_bus_read_config完成功能存取功能APIs参数pos常量值PCI功能结构 PCI功能IDMSI功能电源功率管理功能 功能(capability)集 功能(capability)APIs int pcie_capability_read_wo

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型,如 String, Number, Boolean,

速盾高防cdn是怎么解决网站攻击的?

速盾高防CDN是一种基于云计算技术的网络安全解决方案,可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器,将网站内容缓存到这些服务器上,并通过智能路由技术将用户的请求引导到最近的服务器上,以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击: 分布式拒绝服务攻击(DDoS)防护:DDoS攻击是一种常见的网络攻击手段,攻击者通过向目标网