兄弟同胞传值--中央事件总线
相同父组件的两个子组件之间相互传值(父组件引入两个子组件)
什么是中央事件总线
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: {
}
})
使用方法