父子页面的传参
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>
