vue组件传参,父子组件以及兄弟组件（非常详细）

一，父子组件传参。

1.首先在项目目录中新建template文件夹，里边包含父组件:List.vue以及子组件:firstComponent.vue，secondComponent.vue。

2.父组件引入子组件并且在components中注册

import LIST from '../template/List';

export default {
     components:{LIST}

}

页面直接引用

<LIST></LIST>

3.父组件向子组件传值

<LIST :pageNum="pageNum" :father="father" :tableData="tableData"></LIST>

子组件需要在props接收

export default{

props:['tableData',"father","pageNum"]

}

子组件页面直接引用

<div>{{father}}</div>

<div>{{pageNum}}</div>

<div :data="tableData"></div>

4.父组件调用子组件的方法需要使用ref定义

<LIST :pageNum="pageNum" :father="father" :tableData="tableData"  ref="myChild"></LIST>

父组件methods方法：

methods: {

clickParent(){
             this.$refs.myChild.childClick();

}
   }

子组件方法：

methods:{

childClick(){
           alert('123')
    }

5.子组件调用父组件的方法使用 this.$emit,或者this.$parent

子组件方法：

methods:{

handleEdit(index, row){
                // this.$parent.handleEdit(index, row);//第一种方法
                this.$emit('handleEdit',index,row);//第二种方法this.$emit

}
  },

父组件需要使用@handleEdit自定义方法名称

<LIST :pageNum="pageNum" :father="father" :tableData="tableData"  ref="myChild"  @handleEdit='handleEdit'></LIST>

父组件方法：

handleEdit(index, row) {

this.idx = index;
            this.form = row;
      },

5.子组件向父组件传值用this.$emit

子组件方法：

sendMsg(){

//func: 是父组件指定的传数据绑定的函数，123:子组件给父组件传递的数据
            this.$emit('func',‘123’)
     }

父组件：@func自定义函数名称

<LIST :pageNum="pageNum" :father="father" :tableData="tableData" ref="myChild" @func="getChild" @handleEdit='handleEdit'></LIST>

methods:{

//接受子组件的传值

getChild(data){
                 console.log(data)
          },

}

二。兄弟组件间的传值使用bus（事件总线）

1.首先新建一个js文件：bus.js:

import Vue from 'vue';

// 使用 Event Bus
          const bus = new Vue();

export default bus;

2.在子组件中分别引入bus.js

import bus from '../bus.js';

（1） firstComponents:第一个子组件中传值：

methods:{

                  sendFirst(){

                      bus.$emit('clickFirstEvent','这是从第一个组件传过来的值')
                   }
            }

（2） secondComponents:第二个子组件中接收：

mounted(){

                   bus.$on('clickFirstEvent',res=>{
                        console.log(res)
                     })
             }