4-5非父子组件间的传值(Bus,总线,或称为发布订阅模式,或称观察者模式) · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus,总线,或称为发布订阅模式,或称观察者模式)</title> <script src="vue.js"></script> </head> <body>     <div id="root"> <child content="Hello"></child> <child content="World"></child> </div> <script> Vue.prototype.bus = new Vue(); Vue.component('child', { data(){ return { content_:this.content } }, props: { content: String }, template: '<div @click="handleClick">{{content_}}</div>', methods: { handleClick() { this.bus.$emit('change', this.content_) } }, mounted() { let _this = this this.bus.$on('change', function (msg) { _this.content_ = msg }) }, }); var vm = new Vue({ el: '#root' }) </script> </body> </html> ~~~