vue2.0之兄弟组件通信及路由10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:52 发布时间:2020-03-24
摘要:时间: 2019-11-09阅读: 64标签:通信使用场景:1、兄弟组件的通信,父子组件的通信2、不同路由的通信 最近在学习用vue2.0进行项目的开发,由于接手项目的时候,项目的完整架构已经搭建

时间: 2019-11-09阅读: 64标签: 通信使用场景:1、兄弟组件的通信,父子组件的通信2、不同路由的通信

最近在学习用vue2.0进行项目的开发,由于接手项目的时候,项目的完整架构已经搭建完毕,为了不破坏之前的项目,我就采用了比较古老的写法,说实话不采用es6的语法去写,有好多事情都变得比较麻烦了,不过原理还是一样的,之前有写过父与子 和子与父之间的通信,这次主要说的是兄弟组件的通信及vue路由的使用。
项目实景如下 :

针对兄弟组件的通信,父子组件的通信新建bus.js文件

10bet 1

import Vue from 'vue'var bus = new Vue()export default bus

11.png

在需要通信的组件中引入bus.js,一个组件触发事件,另一个组件监听事件

按照路由----组件通信 ------ 路由切换时的数据加载 方式来进行剖析,嘎嘎我都不好生意用这个词,嘿嘿,希望你能学到东西
一、路由
概念:vue中的路由允许我们通过不同的 URL 访问不同的内容看,针对我刚刚贴的图来说。也就是我每次切换tab时,由于tab对应的url都不同,就可以通过url来找到对应展示的页面。
那完成一个路由功能只需要如下步骤:
1、引入vue-router,可以通过npm进行下载,在按照如下方式进行引入
<script type="text/javascript" src="../../resource/static/vue-router.js"></script>
2.html页面上进行如下定义
(1)、路由切换的入口,点击就会触发路由事件(暂且这么说><)

import Bus from "@/assets/js/bus.js"子组件 testClick(){ alert("test") Bus.$emit("message","hiinew") },父组件 mounted(){ var _this = this Bus.$on("message",function(res){ _this.message = res }) }
            <router-link   to="/group">派单分组</router-link>
             <router-link to="/rule">派单规则</router-link>
             <router-link to="/extend">派单规则扩展</router-link>
    </div>

针对不同路由的通信

vue官网解释:<router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。
(2)路由触发之后,对应的页面展示
<router-view></router-view>,对,只需要将这个标签放到你需要放到的地方,就可以看到路由展示的页面,即对应图中的那个最大的矩形框。
官方解释:<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。这就意味着路由的展示是以组件的形式进行的
(3)、定义路由的三个组件(即与tab项一一对应的)

//需要在A组件销毁前触发事件 beforeDestroy () { Bus.$emit("message","hii") },//在B组件created中接收事件 created () { var _this = this Bus.$on("message",function(res){ console.log(res+"123") _this.message = res }) },//并且在B组件的销毁前解除监听 避免重复监听 beforeDestroy () { Bus.$off("message") },
  <template id="group">  
    ......你的代码
  </template>
 <template id="rule">  
   ......你的代码
 </template>
 <template id="extend">  
   ......你的代码
 </template>

3.js页面需要进行如下定义
(1) 定义进行展示的的三个路由组件(即展示在router-view中的页面)

  var groups =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
         return{
          }
     }
  })
 var rules =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
         return{
          }
     }
  })
 var extends =  Vue.component('group',{
       template:'#group',//对应html页面的模板
        data:function(){
         return{
          }
     }
  })

(2).进行路由配置
//配置路由

    var routes = [ 
        {path:'/group', component :groups},
        {path:'/rule', component:rules},
        {path:'/extend',component:extends},
        //重定向
        {path:'*',redirect:'/group'}
     ]
     //生成路由实例
    var router = new VueRouter({
        routes
    })

其中path匹配的是router-link to后面对应的路径
component 对应的即是该路径下需要在<router-view>展示的组件
然后将这些配置挂载在路由实列上
(3).将配置好的路由实列挂载在页面上

var routerApp =  new Vue({
        el:"#ruleApp",
        router,
        data:{
         }
    })

ok进行以上三个步骤之后就搭建好了路由的基本功能了,搭建完成后可以跳转,那怎么进行数据的通信了,不急,我先把接下来的概念介绍了,最后在来讲实际项目中该如何处理路由之间数据的交互....
二 组件间的通信
如果要实现点击分页组件或在搜素框中输入内容就能展示对应的页面信息,由于我将这几个不同的功能划分为不同的组件,而这几个组件的关系是平行的,就是所谓的兄弟组件(这个和在dom元素中定义兄弟元素是一个道理),所以要想实现上面的功能,就需要掌握兄弟组件的通信方法,按照习惯一步一步来看
(1)掌握 vm.$on 、vm.$emit的概念
vm.$on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。可以理解为信息的接收源。
vm.$emit:触发当前实例上的事件,也就是信息的发起源;
注意两者都是针对同一实列才起作用的,因为兄弟组件是不同的实列,所以为了实现这种一个发起一个接收的通信方法需要进行变通。
(2)创建一个中间变量,来进行信息的发送与接收
vue官方给出的方法:有时候两个组件也需要通信 (非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线
即为了满足同一实列下的通信限制,我们采用空的 Vue 实例来进行通信,将.$on和$emit同时绑定在此实列上
(3)实现代码:
// 创建一个空的vue实列
var bus = new Vue();
//在分页组件中,当页数或当前页发生变化时发起通信,如下代码

本文由10bet发布于Web前端,转载请注明出处:vue2.0之兄弟组件通信及路由10bet

关键词:

上一篇:九大Java性能调试工具

下一篇:没有了

最火资讯