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

序言

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

目录 父组件向子组件传值 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)
    })
    }
  },

---

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