Angularjs Controller 간 통신 방식, vue 구성 요소 간 통신

angularjs 개발 프로젝트에서 서로 다른 구성 요소는 서로 다른 컨트롤러 Controller에 대응하고 구성 요소 간의 통신(예를 들어 파라미터의 전달, 데이터의 전달)은 흔히 볼 수 있는 장면이다. 다음은 두 가지 방법을 소개한다.

1. angular 서비스 기반 방식(서비스)

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: 
    
'Ctrltest1'>  
         "text" ng-model="test" />  
         
"change()">click me
  
    
  
    
'Ctrltest2'>  
        
"add()">my name {{name}}
  
    
  

2. 이벤트 방송을 바탕으로 하는 방식

$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;   
     });
 });

여기child Ctr1의name 변경 사항은 아버지 controller에게 전달되고 아버지 controller는 이벤트 포장을 모든 하위 controller에게 다시 방송하며,child Ctr2는parenttoCtr 이벤트를 등록하고 자신을 바꿉니다.부모 controller가 방송할 때 이벤트name을 반드시 바꿔야 합니다. (Ctr1toparent를parenttoCtr로 바꾸십시오.)또 상하 간의 통신은 작용역 계승 방식으로도 가능하다.

vue 구성 요소 간 통신:

이 문장은 아주 잘 썼다http://www.cnblogs.com/keepfool/p/5637834.html#!comments

$on()을 사용하여 사건을 감청하기;

$emit()를 사용하여 그 위에서 이벤트를 터치하기;

$dispatch()를 사용하여 이벤트를 발송하고 이벤트가 부모 체인을 따라 거품이 발생합니다.

$broadcast () 를 사용하여 이벤트를 방송하고 이벤트는 모든 후손에게 전달됩니다.