vue 中传值（父传子、子传父（传递多个事件）、eventBus、）

1.0 父传子

父组件向子组件传值:子组件用props:['值'] 接收 ;

2.0 子传父

子组件向父组件传值 ：通过$emit事件传递

// father.vue

传值前.png

传值之后页面渲染新值.png

3.0 eventBus

01. 创建一个eventBus.js文件
文件目录 src->assets->js>eventBus.js

import Vue form 'vue'
export default new Vue

02.新建vue

// outherPerson.vue

//main.vue
*兄弟组件中进行互相传值:$emit('handle',value) 进行传值$on('handle',function(msg){//--> msg 是接收其他组件传递过来的值 })*

效果图:

传值之前.png

传值成功显示.png

还有一种情况是vuex (vue 的插件vuex 数据管理)

4.0子组件中一个点击事件通过不同的值向父组件触发不同的事件并传递val

//子组件中

//父组件

image.png