<! DOCTYPE HTML > < HTML lang = "EN" > < head > < Meta charset = "UTF-. 8" > < Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0" > < Meta HTTP-equiv = "X--the UA-Compatible" Content = "IE = Edge" > < title > pass values between the non-parent-child component [bus / bus / publish subscribe model / observer model] </ title > < Script src = "HTTPS: //cdn.jsdelivr.not / NPM / shock / dist / vue.js " > </ script> </head> <body> <div id="app"> <child content='Dell'></child> <child content='Lee'></child> </div> <script> Vue.prototype.bus = new Vue(); Vue.component('child',{ data:function(){ return { selfcontent : this.content } }, props:{ content:String }, template:'<div @click="click">{{selfcontent}}</div>', methods: { click:function(){ // console.log(this.content); this.bus.$emit('change',this.selfcontent) } }, mounted() { var _this =this; this.bus.$on('change',function(res){ // alert(res); _this.selfcontent=res; }) }, }); var app = new Vue({ el:'#app', template:'', data:{}, methods: { }, }) </script> </body> </html>