vue2.x组件间传值（父传子、子传父、兄弟组件间）

序言

       vue框架最显著的特点就是组件化开发，比如，实现一个添加功能，在父组件中有一个添加按钮，点击添加按钮弹出一个窗口(弹窗为子组件)，当输入完表单信息保存时，就需要将数据传给其他组件执行其他逻辑。

目录

• 父组件向子组件传值 props
• 子组件向父组件传值 emit
• 兄弟组件传值 eventBus

---

1.父组件向自组件传值 props

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

//父组件
父组件引入子组件三步：1、引入 2、注册 3、声明。

<div>
    <son :data1="this is postValue"></son>
</div>
//子组件
<div>
    {{data1}} //this is postValue
</div>
<script>
export default {
        props:["data1"],
        methods:{
            clickTest(){
                console.log(this.$props.data1)  //this is postValue         
            }        
        }
}

</script>

2.子组件向父组件传值 emit

• 子组件中需要以某种方式例如点击事件的方法来触发一个方法
• 在方法中使用emit,将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

//父组件
<div>
    <son @showTest="fatherEvent"></son>
</div>
<script>
export default {
        methods:{
            fatherEvent(a){
                console.log("这是父组件的方法",a)        
            }        
        }
}

</script>

//子组件
<script>
export default {
        methods:{
            clickTest(){
                this.$emit("showTest","1")          
            }        
        }
}

</script>

3.兄弟组件传值 eventBus

       eventBus 这种方法通过一个空的 Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件

• 首先建立一个 eventBus.js 数据总线文件

import Vue from 'vue'
const eventBus = new Vue()

export default eventBus
//通过此方式导出，引入时只需 import bus from "eventBus.js";
//如果通过 export enentBus 导出，引入时 import {bus} from "eventBus.js";

• 组件1：通过 emit 发送数据

import bus from "eventBus.js";

data() {
    return {
      searchValue: "",
    };
  },
methods: {
    onSearch() {
      bus.$emit('searchValue',this.searchValue)
    },

• 组件2：通过 on 接收文件

import bus from "eventBus.js";

methods: {
    getSearchValue() {
      bus.$on('searchValue',(message) =>{
          console.log("组件1传过来的值：",message)
    })
    }
  },

---

如有不足之处，欢迎大家积极讨论。