好家伙,
import Vue from "vue"; //向外共享Vue的实例对象 export default new Vue()
<template> <div> <hr> <h1>我是left组件</h1> <h2>我的str数值为:{{ str }}</h2> <button @click="send">点击我将数据传送</button> </div> </template> <script> //将eventbus,js引入 import bus from "./eventbus.js" export default { data(){ return{ str:'彦祖点个赞吧' } }, methods:{ send(){ //通过Eventbus来发送,(触发事件) bus.$emit('share',this.str) } } } </script>
<template> <div> <h1>我是Right组价</h1> <hr> <h2>我的msg数据为:{{ msgfromLeft}}</h2> </div> </template> <script> //导入eventbus,js文件 import bus from "./eventbus.js" export default { data(){ return{ msgfromLeft:0 } }, created(){ //2.为bus绑定自定义事件,(绑定事件) bus.$on('share',(val)=>{ console.log("Left组件传过来的值为:",val) this.msgfromLeft=val }) //将收到的val值打印并且将val的值赋给组件的参数 } } </script>