vue父传子、子传父、兄弟组件传参

父传子

父组件

<fatherTheSon class="fatherTheSon_box" :lists="'今晚打老虎'"></fatherTheSon>

import fatherTheSon from '@/page/father_the_son'
export default {
        components: {
          fatherTheSon
        }
}

子组件

<p>{{lists}}</p>

export default {
    props:{
      	lists:{
        	// type:[String, Number,Array,Boolean,Object,Function,Symbol],//多个可能的类型
        	type:null,//null//允许任何类型
      	}
    },
}

子传父

1.先在父组件引入子组件

import sonTheFather from '@/page/son_the_father'

2.在子组件中使用$emit发射事件

this.$emit('closesd',1,'22',{out:this.out,as:this.as})

3.子父组件中接收

<sonTheFather class="sonTheFather_box" @closesd="closesdk"></sonTheFather>

methods: {
  closesdk(one,two,three){
    this.out=three.out;
    this.as=three.as;
  }
},

兄弟传参

1.创建一个bus.js文件

import Vue from 'vue'
export default new Vue;

2.在要通信的组件引入

import Bus from '@/js/bus.js'

3.在发送数据的页面

funs(){
    Bus.$emit('msg', '我要传给兄弟组件们')
}

4.在接收数据页面

mounted() {
   Bus.$on('msg', (e) => {
   		console.log(`传过来的数据是：${e}`)
   })
},