父子，兄弟组件传值

一、bus组件传值

1.在utils中新建bus.js文件，引入vue

import Vue from 'vue'
const bus = new Vue();// 使用 Event Bus
export default bus;

2.在main.js中引入vue bus (也可以在使用的组件中引入)

import Bus from './utils/bus';   
Vue.prototype.$bus = Bus

3.在A页面传递

import Bus from './utils/bus';
Bus.$emit("Page",value); //很像父子之间传值的方法

4.在B页面接收

import Bus from './utils/bus';
Bus.$off("Page").$on("Page", e => {
    console.log(e)
})

二、子传父(this.$emit())

1.在子组件subsMiddle.vue使用

this.$emit("toGetList",params);

2.在父组件引入子组件

//父组件
<template>
  <div id="app"> 
    <subsmiddle @toGetList="toGetList" />
  </div>
</template>
<script>
import subsMiddle from "./subsMiddle.vue"
   export default {  
   components: {
    subsMiddle
  },   
   methods:{
    toGetList(params) {
     	console.log(params) 
 	},
  }
</script>

三、父传子(props)

1.父组件App.vue

<template>
  <div id="app"> 
    <hellochange :msgchange="msgdata"></hellochange>
  </div>
</template>

<script>
import HelloChange from './components/HelloChange.vue'

   export default {  
    components:{
        hellochange:HelloChange
    },   
      data () { 
        return {       
         msgdata:'我是父组件传值'
        }
      }     
    }
</script>

2.子组件HelloChange.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="hellochange">    
       {{msgchange}}     
    </div>
</template>

<script>
    export default{
        data(){
            return {                         
            }
        },
        props:{
            msgchange:{
                type:String
            }
        }
    }
</script>