组件之间通信(兄弟组件)

时间:2019-11-12
本文章向大家介绍组件之间通信(兄弟组件),主要包括组件之间通信(兄弟组件)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

 兄弟组件数据传递

 1.路由URL参数

在传统开发时我们常常把需要跨页面传递的数据放到url后面,跳转到另外页面时直接获取url字符串获取想要的参数即可,在vue跨组件时一样可以这么做,

// router index.js 动态路由
        {
           path:'/params/:Id',
           component:Params,
           name:Params
        }
  // 跳转路由
        <router-link :to="/params/12">跳转路由</router-link>
  在跳转后的组件中用$route.params.id去获取到这个id参数为12,但这种只适合传递比较小的数据,数字之类的

2.Bus通信

在组件之外定义一个bus.js作为组件间通信的桥梁,适用于比较小型不需要vuex又需要兄弟组件通信的

  1).bus.js中添加如下

import Vue from 'vue'
      export default new Vue

  2.)组件中调用bus.js通过自定义事件传递数据

import Bus from './bus.js' 
      export default { 
          methods: {
             bus () {
                Bus.$emit('msg', '我要传给兄弟组件们')
             }
          }
      }

  3).兄弟组件中监听事件接受数据

import Bus from './bus.js'
        export default {
            mounted() {
               Bus.$on('msg', (e) => {
                 console.log(e)
               })
             }
           }

注:以上两种使用场景并不高所以只是简略提一下,这两点都是很久以前写过,以上例子网上直接搜集而来如有错误,指正

Vuex集中状态管理 vuex是vue的集中状态管理工具,对于大型应用统一集中管理数据,很方便,在此对vuex的用法并不过多介绍只是提一下使用过程中遇到的问题

  规范:对于多人开发的大型应用规范的制定是至关重要的,对于所有人都会接触到的vuex对其修改数据调用数据都应有一个明确严格的 使用规范     vuex分模块:项目不同模块间维护各自的vuex数据

    限制调用:只允许action操作数据,getters获取数据,使用mapGetters,mapActions辅助函数调用数据

*   对于vuex的使用场景也有一些争论,有人认为正常组件之间就是要用父子组件传值的方式,即使子组件需要使vuex中的数据也应该由父组件获取再传到子组件中,但有的时候组件间嵌套很深,只允许父组件获取数据并不是一个方便的方法,所以对于祖先元组件与子组件传值又有了新问题,vue官网也有一些方法解决,如下

祖先组件于子组件间的数据传递

provide/inject 除了正常的父子组件传值外,vue也提供了provide/inject 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效 官网实例

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
}

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

一个字符串数组,或 一个对象,对象的 key 是本地的绑定名,value 是:

   在可用的注入内容中搜索用的 key (字符串或 Symbol),或 一个对象,该对象的:

   from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)

  default 属性是降级情况下使用的 value

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。 provide/inject还未在项目中应用过,后面会做尝试

原文地址:https://www.cnblogs.com/happyeveryuday/p/11840173.html