建议使用这种方便快捷
父传子使用
使用props
全局事件总线比较适用于 子 传递 父亲
安装全局事件总线
new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this //挂载到VC } }).$mount('#app')
beforeCreate 生命周期:无法通过VM访问data数据 和 methods 方法 生命周期的第一个函数
定义事件总线
$emit:定义
$on:接收使用
发送者:
<button @click="snedData()">登录传递用户名</button>
snedData() { this.$bus.$emit('send', 666, 'dpc') }
调用事件总线
$on:接收使用
接收者:
created() { this.getData() }, methods: { getData() { this.$bus.$on('send', (data, str) => { console.log(data, str) }) } },
销毁事件总线
使用完后销毁,不妨碍其他组件的使用
beforeDestroy:销毁之前
beforeDestroy() { this.$bus.$off('send') }