父子页面的传参

1、定义Bus

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2、挂载Bus

将bus挂载到vue.prototype上

在main.js中
import Bus from './lib/bus'

Vue.prototype.$bus = Bus

3、子组件调用

在子组件中通过this.$bus.$on(), this.$bus.$emit()来调用,组件一给组件二赋值

• 组件一 email.vue

  <template>
    <div class="email"><button @click="handleClick">按我</button></div>
  </template>
  <script>
  export default {
  methods: {
    handleClick () {
        this.$bus.$emit('on-click','hello')
      }
    }
  }
  </script>
  <style>
    .email{
      border: 1px solid green;
     }
  </style>
  

• 组件二 tel.vue

  <template>
    <div class="tel">{{ message }}</div>
  </template>
  <script>
  export default {
  data () {
    return {
        message: ''
    }
  },
  mounted () {
      this.$bus.$on('on-click',mes => {
        this.message = mes
      })
    }
  }
  </script>
  <style >
  .tel{
    border: 1px solid red;
  }
  </style>