Angularjs Controller 间通信方式、vue组件之间通信

angularjs开发项目中，不同组件通常对应着不同的控制器Controller ，组件之间的通信（如参数的传递，数据的传递）是很常见的场景，下面介绍两种方法：

• 1、基于angular服务的方式（Service）
• 2、基于事件广播的方式（$$on、$emit和$broadcast）
  这两种方法都可以用于父子和兄弟组件之间的通信
  一、基于angular服务的方式：
  创建一个自定义服务，在服务中生成一个对象，对象作为存放数据的容器，该服务中的对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子，在一个控制器修改了服务对象的值，在另一个控制器中获取到修改后的值：

js:
    var app = angular.module('myApp', []);  
    //自定义服务Myservice 
    app.factory('Myservice', function(){  
        return {};  
    });  

    app.controller('Ctrltest1', function($scope, Myservice) {  
      $scope.change = function() {  
           Myservice.name = $scope.test;   //在第一个控制器中为服务对象赋值  
      };  
    });  

    app.controller('Ctrltst2', function($scope, Myservice) {  
        $scope.add = function() {  
            $scope.name = Myservice.name;  //将第一个控制器中为服务对象赋的值传给第二个控制器  
        };  
    });  

html: 
    <div ng-controller='Ctrltest1'>  
         <input type="text" ng-model="test" />  
         <div ng-click="change()">click me</div>  
    </div>  
    <div ng-controller='Ctrltest2'>  
        <div ng-click="add()">my name {{name}}</div>  
    </div>  

二、基于事件广播的方式

$on
用于监听事件
$emit
用于向上分发（子作用域向父作用域）
$broadcast
用于向下广播（父作用域向子作用域）

HTML：
1 <div ng-app="app" ng-controller="parentCtr">
2     <div ng-controller="childCtr1">name :
3         <input ng-model="name" type="text" ng-change="change();" />
4     </div>
5     <div ng-controller="childCtr2">Ctr1 name:
6         <input ng-model="ctr2Name" />
7     </div>
8 </div>

js:
 var myapp=angular.module("app", [])
 myapp.controller("parentCtr",function ($scope) {
     //监听来自childCtr1的信息
     $scope.$on("Ctr1toparent",function (event, msg) {
          console.log("parent", msg);//
          //把监听来的信息广播出去
          $scope.$broadcast("parenttoCtr", msg);
     });
 myapp.controller("childCtr1", function ($scope) {
        $scope.change = function () {
        //childCtr1数据变化后向parentCtr分发信息
           $scope.$emit("Ctr1toparent", $scope.name);
        };
 myapp.controller("childCtr2", function ($scope) {
     //监听来自parentCtr的信息
     $scope.$on("parenttoCtr",function (event, msg) {
         console.log(msg);  
         $scope.ctr2Name= msg;   
     });
 });

这里childCtr1的name改变会向上传递给父controller，而父controller会对事件包装再广播给所有子controller，而childCtr2则注册了parenttoCtr事件，并改变自己。注意父controller在广播时候一定要改变事件name（把Ctr1toparent改变为parenttoCtr）。
另外，上下级之间的通信还可以用作用域继承方式。

---

vue组件之间通信：

这篇文章写的非常好
http://www.cnblogs.com/keepfool/p/5637834.html#!comments

• 使用 $on() 监听事件；
• 使用 $emit() 在它上面触发事件；
• 使用 $dispatch() 派发事件，事件沿着父链冒泡；
• 使用 $broadcast() 广播事件，事件向下传导给所有的后代。