手把手教你VUE从入门到放弃—— 篇十七（非父子组件间传值）-优快云博客

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/103690546

发布订阅模式实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <row name="Tom" ></row>
       <row name="Mike"></row>
   </div>
   <script>
       Vue.prototype.bus = new Vue();
       Vue.component('row',{
           data:function(){
               return {
                   selfName:this.name
               }
           },
           props:{
               name:String
           },
           template:'<h2 @click="handleClick">{{selfName}}</h2>',
           methods:{
               handleClick:function(){
                   this.bus.$emit('change',this.selfName);
               }
           },
           mounted:function(){
               var this_ = this;
               this.bus.$on('change',function(msg){
                   alert(msg);
                   this_.selfName = msg;
               })
           }
       });
       var app = new Vue({
           el:'#app2'
       });
   </script>
</body>
</html>