使用Vue快速开发单页应用－功能组件与路由组件通信

KitorinZero 发布于2019-08-14 14:33 / 1378人阅读

摘要：展示信息展示时间结束后，执行回调函数如果有上面就完成了组件的整套逻辑，最后我们还需要把组件挂在。原文链接其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信

本文所涉及代码全在vue-cnode

上图是我们demo项目的整体结构，我们可以看见在第三级有三个东西router,全局组件，功能组件。其中全局组件和功能组件是脱离于router的，因为这两部分是所有逻辑组件共有的。我们将他提出来，放在App.vue里面而不是放在router下面的路由组件中，是为了只引用一次然后全局调用。

但是，具体的路由逻辑组件需要展现的全局组件内容是不一样的，需要功能组件交互的内容也不一样，所以需要在不同的路由逻辑组件中对全局组件和功能组件进行控制。

本文就是介绍如何通过vuex对全局组件和功能组件进行控制的。

使用vuex传递逻辑数据

说是控制，其实就是组件间交互，vue中组件交互有很多方式，我们这里用vuex。

我们将多带带建立一个module(doc_state)，用来做功能组件和全局组件的功能交互，在module中我们将初始化功能组件或则全局组件需要的数据，和函数方法等。如下图所示：

// doc state 需要一些变量来记录文档状态
import {
  SET_TIP
} from "../mutation_types"
const state = {
  tip: {
    text: "",
    time: 2000,
    callback: null
  }
}
const mutations = {
  [SET_TIP] (state, tip) {
    state.tip = tip
  }
}
export default {
  state,
  mutations
}

这里我们以tip（提示）组件为例子讲解，所有doc modules在/src/vuex/modules/doc_state。

然后我们定义doc_actions定义我们的action:

import * as types from "../mutation_types"

export const setTip = ({dispatch}, tip) => {
  if (!tip.time) tip.time = 2000 // 默认tip展现时间
  dispatch(types.SET_TIP, tip)
}

actions，会在路由逻辑组件中引用，调用action就能控制我们的tip组件。

再把 doc_state挂载到store.js就可以了～

import docState from "./modules/doc_state"
export default new Vuex.Store({
  modules: {
    docState,
    content,
    userInfo
  },
  strict: debug,
  middlewares: debug ? [] : []
})

tip组件

在我们的common文件夹里面新建一个tip.vue。他就是我们的提示信息组件。（路径/src/components/common/tip.vue）

首先我们需要获取tip在vuex里面的数据：

vuex: {
  getters: {
    tip: ({ docState }) => docState.tip
  }
},

然后就是具体的逻辑了：

data () {
  return {
    tipVisible: false
  }
},
watch: {
  tip: "tipShow"
},
methods: {
  tipShow () {
    let self = this
    self.tipVisible = true
    setTimeout(function () {
      self.tipVisible = false
      if (self.tip.callback) {
        self.tip.callback()
      }
    }, self.tip.time)
  }
}

上面的tipVisible是我们用来控制控制展示的变量，在template里面：

tip组件一共做了三件事：

监听vuex获取的tip变量，在tip变量改变时执行tipShow方法。

展示信息

展示时间结束后，执行回调函数（如果有）

上面就完成了tip组件的整套逻辑，最后我们还需要把tip组件挂在App.vue。

template:

js:

import tip from "./components/common/tip"
export default {
  components: {
    tip,
  },
}

这样我们就能在所有路由逻辑组件调用了。

调用方法

拿登录组件作为例子。

首先我们需要引入action:

import { setMenu, setTip } from "../../vuex/actions/doc_actions"
export default {
  vuex: {
    actions: {
      setTip,
      setDetail
    }
  }
}

我们在登录出错的时候会给用户提示信息：

this.setBaseInfo(this.access, (res) => {
  if (res.success) {
    this.success()
  }
  this.setTip({
    text: res.msg
  })
})

只要调用this.setTip方法就可以了。是不是很简单？组件写好后，后面大家再使用就只需调用这一个方法。

注意
这里需要主要传入回调函数的this的指向。建议这样：

this.setTip({
  text: "lala",
  callback: () => {
    this.xxx()
  }
})

箭头函数有个作用就是会绑定它声明地方的this。这样我们就可以在callback里面调用当前组件的方法了。不用箭头函数，bind一下也是可以的～

小结

你可以发现我们的组件交互完全是通过数据去控制的。在搭建功能组件和vuex的module时会复杂一点，但是逻辑更清晰，我们在debug时候也更方便。在子组件调用时也非常的简单，就相当提供了一个接口。

原文链接：http://hiluluke.cn/2016/08/25...

其他

使用Vue快速开发单页应用－主体结构

使用Vue快速开发单页应用－vue-router

使用Vue快速开发单页应用－登录页面

使用Vue快速开发单页应用－功能组件与路由组件通信

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

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

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

使用Vue快速开发单页应用－主体结构

摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从...

dcr309duan 2019-08-20 10:29 评论0 收藏0
使用Vue快速开发单页应用－vue-router

摘要：当前路由对象调用此函数处理切换过程的下一步终止切换重定向到另一个路由由于是路由切换后，只有上面的两个属性。原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode vue-router主要作用是将路由控制，转移到前端。我们将会在vue-router里面保存一个路由表，在vue...

mingde 2019-08-20 10:29 评论0 收藏0
采用vue+webpack构建的单页应用——私人博客MintloG诞生记

摘要：我采用原生编写后台，因为感觉增删改查的功能很简单，就懒得用框架了其实是不会。浏览模式它也有一个，用来切换文章列表和文章详情，也就是和编辑模式它加载了作为工具栏，然后可以进行文章的撰写与修改。介绍项目地址：https://github.com/jrainlau/MintloG （特别乱，参考就好-_-|||）showImg(https://segmentfault.com/img/b...

Terry_Tai 2019-06-27 12:09 评论0 收藏0
使用Vue快速开发单页应用－登录页面

摘要：首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。大家还是看看我这做个指引，具体还是看代码原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从...

yeyan1996 2019-08-20 10:29 评论0 收藏0
Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0