2021-11-12 兄弟同胞传值--中央事件总线/数据请求的闭环操作

兄弟同胞传值--中央事件总线

相同父组件的两个子组件之间相互传值(父组件引入两个子组件)

什么是中央事件总线

eventBus--中央事件总线 就是凌驾在两个兄弟组件之上的一个空的vue实例（中央事件总线eventBus）通过这个空的vue实例 就在两个兄弟组件之上建立起了数据通信的桥梁

实现

1.新建文件夹eventbus与文件用来存放这个中央事件总线的空实例

2.创建空实例

import Vue from "vue"
//创建实例并且暴露
export default new Vue

3.需要传递的组件中 引用中央事件总线 并且 使用事件来触发 给中央事件总线之上绑定一个自定义事件

<template>
  <div>
      <!-- 2.事件来触发一个函数 -->
      zia <button @click="fun()">点我把数据给zib</button>
  </div>
</template>
​
<script>
// 1.引用中央事件总线
import EventBus from "@/eventbus/index.js"
export default {
    methods:{
        fun(){
            // 3.给中央事件总线之上绑定一个自定义事件
            EventBus.$emit("zia","我是zia的数据呵呵！！！！")
        }
    }
}
</script>
​
<style>
​
</style>

4.在需要数据的组件之上 先引用中央事件总线 使用$on()来监听实例上的自定义事件

<template>
  <div>
      zib
  </div>
</template>
​
<script>
// 1.引用
import EventBus from "@/eventbus/index.js"
export default {
// 2.就可以使用$on来监听实例上的自定义事件
// $on( 你要监听得自定义事件名，(你传递过来的数据)=>{} ) 
    mounted(){
        EventBus.$on("zia",(val)=>{
            console.log(val);
        })
    }
}
</script>
​
<style>
​
</style>

跨组件传值---vuex

组件与组件之间有多个层级关系的时候传值

vuex状态(数据)管理工具 给项目提供一个集中保存数据的地方 把项目的数据都放在这个仓库中 无论那个组件向使用某条数据 那么直接来仓库去取出即可 免去了传统组件与组件之间传递数据的复杂性

vue是单项数据流 那么组件与组件之间在传递的时候 如果是兄弟或者跨组件又或者逆向传值 我们就可以使用vuex来集中的管理我们的数据

vuex使用

(新建项目的时候,跟router的做法一样,选中vuex直接回车) 系统自动配置完会有store文件夹

state 存放数据的地方

定义state是在vuex的文件中的state中进行定义

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
export default new Vuex.Store({
  state: {  //就是这个仓库中存放数据的地方
       name:"xixi"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
​

使用方法