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;
  }
},

3. 非父子组件进行传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

组件A：

<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug，来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

组件B：

<template>
  <div>
    B组件:
    <input type="button" value="点击触发" @click="getData">
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: 0
      }
    },
    mounted: function () {
      var vm = this
      // 用$on事件来接收参数
      Bus.$on('val', (data) => {
        console.log(data)
        vm.name = data
      })
    },
    methods: {
      getData: function () {
        this.name++
      }
    }
  }
</script>